svg: 高斯模糊滤镜

马黑黑

svg高斯模糊过滤器命名为 feGaussianBlur，具体属性有三个，常用到的两个，in 和 stdDeviation，其中：

	in 用来表示滤镜的作用范围，例如：in="SourceGraphic"
	stdDeviation 用来表示模糊设置，例如：stdDeviation="5,3"

stdDeviation也可以只接受一个值，这将表明x、y方向的模糊设置一致。

以下代码，展现两个相同尺寸的矩形，第二个矩形使用了高斯模糊滤镜：

<svg width="400" height="200" style="border: 1px solid gray;">
	<filter id="mohu">
		<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
	</filter>
	<rect x="10" y="50" width="100" height="100" fill="olive" />
	<rect x="200" y="50" width="100" height="100" fill="olive" style="filter: url(#mohu);" />
</svg>

效果如下：

红影

这些命令很陌生，这样对比着看，滤镜效果很明显

红影

这个和前面那个帖子一样，都要设定个 id=  来设置和调用效果呢。

马黑黑

红影 发表于 2023-10-7 15:06
这个和前面那个帖子一样，都要设定个 id=  来设置和调用效果呢。

svg滤镜都是酱紫的，要建立联系，一般通过 CSS 来完成这个关联工作

马黑黑

醉美水芙蓉 发表于 2023-10-7 17:39
完全不懂，只会跟着老师玩玩！黑黑老师做教程辛苦了！

滤镜原理和ps其实是一样的，只是，HTML里面通过svg调用滤镜，都是用代码实现，很是抽象，前端基础不好的话的确不好理解

红影

马黑黑 发表于 2023-10-7 17:39
svg滤镜都是酱紫的，要建立联系，一般通过 CSS 来完成这个关联工作

也就是说，关联是必须的一个环节。

马黑黑

红影 发表于 2023-10-7 20:12
也就是说，关联是必须的一个环节。

设置滤镜，滤镜用在哪里

红影

马黑黑 发表于 2023-10-7 21:54
设置滤镜，滤镜用在哪里

哦，设置好了，就可以用在任何想用的地方了吧。

马黑黑

红影 发表于 2023-10-7 21:58
哦，设置好了，就可以用在任何想用的地方了吧。

一切都应有计划

红影

马黑黑 发表于 2023-10-7 21:59
一切都应有计划

那是当然，代码里的计划最是严谨了。

马黑黑

红影 发表于 2023-10-7 22:13
那是当然，代码里的计划最是严谨了。

应该是

红影

马黑黑 发表于 2023-10-7 22:14
应该是

肯定是

马黑黑

红影 发表于 2023-10-7 22:30
肯定是

额？

红影

马黑黑 发表于 2023-10-8 18:43
额？

讨论的话题是代码的严谨呢。

马黑黑

红影 发表于 2023-10-8 19:09
讨论的话题是代码的严谨呢。

额，我不太清楚这个

红影

马黑黑 发表于 2023-10-8 19:37
额，我不太清楚这个

被高斯模糊弄得模糊了

马黑黑

红影 发表于 2023-10-8 20:02
被高斯模糊弄得模糊了

大约吧

红影

马黑黑 发表于 2023-10-8 20:05
大约吧

id="mohu" 这个设置也是汉语拼音的，真好

马黑黑

红影 发表于 2023-10-8 20:26
id="mohu" 这个设置也是汉语拼音的，真好

这个随意的