svg: 高斯模糊滤镜
本帖最后由 马黑黑 于 2023-10-7 12:56 编辑 <br /><br /><p>svg高斯模糊过滤器命名为 feGaussianBlur，具体属性有三个，常用到的两个，in 和 stdDeviation，其中：<br><br></p><pre>
in 用来表示滤镜的作用范围，例如：in="SourceGraphic"
stdDeviation 用来表示模糊设置，例如：stdDeviation="5,3"
</pre>
<p>stdDeviation也可以只接受一个值，这将表明x、y方向的模糊设置一致。<br><br></p>
<p>以下代码，展现两个相同尺寸的矩形，第二个矩形使用了高斯模糊滤镜：<br><br></p>
<pre class="code">
<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>
</pre>
<p>效果如下：<br><br></p>
<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> 这些命令很陌生，这样对比着看，滤镜效果很明显{:4_204:} 这个和前面那个帖子一样，都要设定个 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
应该是
肯定是{:4_204:} 红影 发表于 2023-10-7 22:30
肯定是
额？ 马黑黑 发表于 2023-10-8 18:43
额？
讨论的话题是代码的严谨呢。 红影 发表于 2023-10-8 19:09
讨论的话题是代码的严谨呢。
额，我不太清楚这个 马黑黑 发表于 2023-10-8 19:37
额，我不太清楚这个
被高斯模糊弄得模糊了{:4_189:} 红影 发表于 2023-10-8 20:02
被高斯模糊弄得模糊了
大约吧 马黑黑 发表于 2023-10-8 20:05
大约吧
id="mohu" 这个设置也是汉语拼音的，真好{:4_173:} 红影 发表于 2023-10-8 20:26
id="mohu" 这个设置也是汉语拼音的，真好
这个随意的
页:
[1]
2