浅谈 svg 滤镜 in 属性
本帖最后由 马黑黑 于 2023-10-11 22:42 编辑 <br /><br /><style>.ma p { margin: 8px 0; }
.rred { color: red; }
.ma > pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; }
</style>
<div class="ma">
<p>svg 滤镜的 in 属性用于指定效果的输入源，可以是 svg 预设的内置值，也可以是某个滤镜的快照（result）。</p>
<p>一、内置值</p>
<p>svg 内置的 in 属性值共 6 个，但迄今为止，只有两个得到所有主流浏览器的支持，所以我们仅需要知道这两个值就可以了: <br><br> ① SourceGraphic，指定效果的输入源为整个图像；<br> ② SourceAlpha，指定滤镜效果的输入源是图像的Alpha通道，只使用元素的非透明部分，就是说，如果设定 in="SourceAlpha"，其效果仅作用于图形的不透明的区域。</p>
<pre><feGaussianBlur <span class="rred">in="SourceGraphic"</span> stdDeviation="5" />
<feGaussianBlur <span class="rred">in="SourceAlpha"</span> stdDeviation="5" /></pre>
<p>SourceGraphic 作用于整个图形，之前我们已经有过示例。SourceAlpha 作用于图形的 Alpha 通道，它作用于图形的非透明部分，下面给出代码与效果演示：</p>
<pre><svg width="400" height="140">
<filter id="yinying">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="mohu" />
<feOffset in="blur" dx="5" dy="8" result="pianyi" />
<feMerge>
<feMergeNode in="pianyi" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<image href="https://638183.freep.cn/638183/t23/btn/hshx.png" />
<image x="140" href="https://638183.freep.cn/638183/t23/btn/hshx.png" filter="url(#yinying)" />
</svg>
</pre>
<p>代码解析：首先，我们设置了一个高斯模糊滤镜，它作用于Alpha源，我们还给它建立了一个快照 mohu；接着，我们创建一个偏移滤镜，它作用于快照名为 mohu 的高斯滤镜，自己也有一个快照名称 pianyi；最后，我们通过 feMerge 滤镜将图像与滤镜合并：将快照名为 pianyi 的滤镜合并到整个图像（in="SourceGraphic"）。下面是效果，第一个图形未使用滤镜，第二个图形使用了 id="yinying" 的滤镜：</p>
<svg width="400" height="140">
<filter id="yinying">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="mohu"></feGaussianBlur>
<feOffset in="mohu" dx="5" dy="8" result="pianyi"></feOffset>
<feMerge>
<feMergeNode in="pianyi"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<image href="https://638183.freep.cn/638183/t23/btn/hshx.png"></image>
<image x="140" href="https://638183.freep.cn/638183/t23/btn/hshx.png" filter="url(#yinying)"></image>
</svg>
<p>上面的示例可以这么理解：高斯模糊滤镜在源图像的基础上创建了一个黑白模糊的图像，偏移滤镜则将之向右向下偏移一定距离，然后合并源和滤镜，合并滤镜的第一个作用于偏移滤镜，而偏移滤镜作用于模糊滤镜，合并滤镜的第二个作用于整个图像，亦即原图像待在原位不动，动的是模糊滤镜的图像。合并的顺序至关重要，大家可以试着变换一下 feMergeNode 的顺序看看效果。</p>
<p>二、快照值</p>
<p>滤镜 in 属性还可以应用于 result 快照，就是我们给某个滤镜设定的 result 值。上例，feGaussianBlur 滤镜我们设定了 result="mohu" 快照，feOffset 滤镜的 in 属性值就是它，意思就是，feOffset 偏移滤镜作用于快照名为 mohu 的滤镜。这里就不再举例。</p>
</div>
这个，的确感觉到了复杂{:4_173:} 红影 发表于 2023-10-11 22:51
这个，的确感觉到了复杂
in 属性本身不复杂，具体应用就有些复杂了，这是因为需要合并。 变换了一下合并的顺序，结果黑白模糊就跑到上面来了{:4_173:} “高斯模糊滤镜在源图像的基础上创建了一个黑白模糊的图像”，是因为in="SourceAlpha"么。原来输入源使用元素的非透明部分得到的就是黑白效果啊。 这个SourceAlpha只对.png图片有效吧？
感觉得到的黑白模糊看着比原图小呢。 马黑黑 发表于 2023-10-11 22:59
in 属性本身不复杂，具体应用就有些复杂了，这是因为需要合并。
是的，只有2个得到支持的，的确不多。 红影 发表于 2023-10-11 23:25
是的，只有2个得到支持的，的确不多。
再加上自定义的快照 红影 发表于 2023-10-11 23:06
这个SourceAlpha只对.png图片有效吧？
感觉得到的黑白模糊看着比原图小呢。
所有。凡有非透明元素的。 马黑黑 发表于 2023-10-11 23:27
再加上自定义的快照
快照是个新概念，这个还需要努力熟悉起来。 马黑黑 发表于 2023-10-11 23:31
所有。凡有非透明元素的。
如果不是.png图片，整体图片都是非透明啊。 红影 发表于 2023-10-12 09:40
如果不是.png图片，整体图片都是非透明啊。
那它就作用于整个图片 红影 发表于 2023-10-12 09:39
快照是个新概念，这个还需要努力熟悉起来。
所谓快照，就是给对象（比如滤镜）一个临时名称用以做标识，方便在后续使用它 马黑黑 发表于 2023-10-12 18:02
那它就作用于整个图片
哦，知道了{:4_204:} 马黑黑 发表于 2023-10-12 18:03
所谓快照，就是给对象（比如滤镜）一个临时名称用以做标识，方便在后续使用它
嗯嗯，等于给对象一个身份标志，便于使用它。 红影 发表于 2023-10-12 20:21
嗯嗯，等于给对象一个身份标志，便于使用它。
相当于临时身份证。这在svg滤镜中很常见。 红影 发表于 2023-10-12 20:21
哦，知道了
{:4_190:} 马黑黑 发表于 2023-10-12 20:39
相当于临时身份证。这在svg滤镜中很常见。
是的，看到好几次了{:4_173:} 马黑黑 发表于 2023-10-12 20:40
谢谢{:4_204:} 红影 发表于 2023-10-12 21:14
谢谢
客气