请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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 的滤镜。这里就不再举例。