svg ：feImage 滤镜

马黑黑

feImage 滤镜从外部来源获得图像数据并将图像输出到滤镜引用者。x、y 属性表示 feImage 滤镜作用于对象的XY坐标，width、height 属性表示滤镜所使用图像将呈现的宽高尺寸，href 属性（也可写成 xlink:href）为外部来源的图片地址，还有 result 快照属性等。后面的示例，使用了如下图片：

上面的图片尺寸为 130*127，现在，我们要在 400*200 的 svg 画布上绘制一个矩形，矩形尺寸 300*150 ，填充色是卡其色，然后通过 feImage 滤镜将上面展示的图片以 100*100 的尺寸放置其上。先看效果：

再看代码：

<svg width="400" height="200">
	<filter id="image">
		<feImage x="6" y="6" width="100" height="100" xlink:href="../player/img/hshx.png" result="img" />
		<feMerge>
			<feMergeNode in="SourceGraphic" />
			<feMergeNode in="img" />
		</feMerge>
	</filter>
	<rect x="0" y="0" width="300" height="150" fill="khaki" filter="url(#image)" />
</svg>

代码中，我们创建了一个 filter 滤镜，id 标识为 image：里面首先使用一个 feImage 滤镜，它从{6,6}开始发生作用，作用宽高都是100px，它引入一个外部图像（支持外部svg图像），滤镜快照名为 img。接着，使用 feMerge 合并滤镜，将整个整个图形（in="SourceGraphic"）和快照名为 img 的 feImage 滤镜叠加在一起。最后，rect 矩形标签调用该滤镜（filter="url(#image)"），就得出前面所展示的效果。这里提示一下：如果不使用合并滤镜，则 rect 矩形标签的 fill 属性所规定的填充色将不起作用，整个矩形的背景只有左上角的图标，可见合并滤镜在 svg 滤镜中的重要性。

红影

可以不用管原图大小，按自己想要的引用图片么？

红影

我试了一下100*50和50*100，看到图片不是被拉伸，而是整体缩小到长宽都50左右了。

红影

<feBlend in="img" type="normal" />
这个是什么，为什么合并之前还要先弄个混合？是规定的么？

红影

还试了200*200 超出范围的图片自动隐去了。

红影

“如果不使用合并滤镜，则 rect 矩形标签的 fill 属性所规定的填充色将不起作用”
好像不使用合并滤镜，不但卡其色的矩形看不到，400*200 的 svg 画布的黑色边框也看不到了。

马黑黑

红影 发表于 2023-10-12 21:02
可以不用管原图大小，按自己想要的引用图片么？

对

马黑黑

红影 发表于 2023-10-12 21:03
我试了一下100*50和50*100，看到图片不是被拉伸，而是整体缩小到长宽都50左右了。

滤镜对图片是按原图比例伸缩

马黑黑

红影 发表于 2023-10-12 21:05
这个是什么，为什么合并之前还要先弄个混合？是规定的么？

这是多余的滤镜，我原先是做其他用途的，忘记删除了

马黑黑

红影 发表于 2023-10-12 21:13
“如果不使用合并滤镜，则 rect 矩形标签的 fill 属性所规定的填充色将不起作用”
好像不使用合并滤镜，不 ...

只要把合并滤镜代码删除掉，是可以的。合并滤镜全部代码是：

                <feMerge>
                        <feMergeNode in="SourceGraphic" />
                        <feMergeNode in="img" />
                </feMerge>

红影

马黑黑 发表于 2023-10-12 22:24
对

很奇特。

红影

马黑黑 发表于 2023-10-12 22:25
滤镜对图片是按原图比例伸缩

用原比例，而且取值是xy里小的那个，不管另一个值了呢。

红影

马黑黑 发表于 2023-10-12 22:29
这是多余的滤镜，我原先是做其他用途的，忘记删除了

哦，我还以为必须有这个呢。

红影

马黑黑 发表于 2023-10-12 22:30
只要把合并滤镜代码删除掉，是可以的。合并滤镜全部代码是：

是的，去掉了，不显示边框了，但影响力还在，看到图片设置过大时，超出的部分自动隐去了。

马黑黑

红影 发表于 2023-10-13 13:53
是的，去掉了，不显示边框了，但影响力还在，看到图片设置过大时，超出的部分自动隐去了。

一切根据需要设置

马黑黑

红影 发表于 2023-10-13 13:52
哦，我还以为必须有这个呢。

我同时做了几个效果，最后输出的代码没删完不必要的

马黑黑

红影 发表于 2023-10-13 13:52
用原比例，而且取值是xy里小的那个，不管另一个值了呢。

现在这么理解可以。这个svg还有一个基于坐标系的属性，还没到时候说。

红影

马黑黑 发表于 2023-10-13 16:35
一切根据需要设置

嗯嗯，这个应该是新知识，学习了

红影

马黑黑 发表于 2023-10-13 16:41
我同时做了几个效果，最后输出的代码没删完不必要的

哦，只展示了一个效果啊，可惜其他的没看到。

红影

马黑黑 发表于 2023-10-13 16:42
现在这么理解可以。这个svg还有一个基于坐标系的属性，还没到时候说。

不是这么理解，是感觉中是这样呢