浅谈 svg 滤镜 in 属性

马黑黑 · 发表于 2023-10-11 22:38

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-10-11 22:42 编辑

svg 滤镜的 in 属性用于指定效果的输入源，可以是 svg 预设的内置值，也可以是某个滤镜的快照（result）。

一、内置值

svg 内置的 in 属性值共 6 个，但迄今为止，只有两个得到所有主流浏览器的支持，所以我们仅需要知道这两个值就可以了:

① SourceGraphic，指定效果的输入源为整个图像；
② SourceAlpha，指定滤镜效果的输入源是图像的Alpha通道，只使用元素的非透明部分，就是说，如果设定 in="SourceAlpha"，其效果仅作用于图形的不透明的区域。

<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feGaussianBlur in="SourceAlpha" stdDeviation="5" />

SourceGraphic 作用于整个图形，之前我们已经有过示例。SourceAlpha 作用于图形的 Alpha 通道，它作用于图形的非透明部分，下面给出代码与效果演示：

<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>

代码解析：首先，我们设置了一个高斯模糊滤镜，它作用于Alpha源，我们还给它建立了一个快照 mohu；接着，我们创建一个偏移滤镜，它作用于快照名为 mohu 的高斯滤镜，自己也有一个快照名称 pianyi；最后，我们通过 feMerge 滤镜将图像与滤镜合并：将快照名为 pianyi 的滤镜合并到整个图像（in="SourceGraphic"）。下面是效果，第一个图形未使用滤镜，第二个图形使用了 id="yinying" 的滤镜：

上面的示例可以这么理解：高斯模糊滤镜在源图像的基础上创建了一个黑白模糊的图像，偏移滤镜则将之向右向下偏移一定距离，然后合并源和滤镜，合并滤镜的第一个作用于偏移滤镜，而偏移滤镜作用于模糊滤镜，合并滤镜的第二个作用于整个图像，亦即原图像待在原位不动，动的是模糊滤镜的图像。合并的顺序至关重要，大家可以试着变换一下 feMergeNode 的顺序看看效果。

二、快照值

滤镜 in 属性还可以应用于 result 快照，就是我们给某个滤镜设定的 result 值。上例，feGaussianBlur 滤镜我们设定了 result="mohu" 快照，feOffset 滤镜的 in 属性值就是它，意思就是，feOffset 偏移滤镜作用于快照名为 mohu 的滤镜。这里就不再举例。