svg ：feImage 滤镜
本帖最后由 马黑黑 于 2023-10-12 22:28 编辑 <br /><br /><style>.ma p { margin: 8px 0; }
.ma > pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; }
.ma > svg { border: 1px solid gray; }
</style>
<div class="ma">
<p>feImage 滤镜从外部来源获得图像数据并将图像输出到滤镜引用者。x、y 属性表示 feImage 滤镜作用于对象的XY坐标，width、height 属性表示滤镜所使用图像将呈现的宽高尺寸，href 属性（也可写成 xlink:href）为外部来源的图片地址，还有 result 快照属性等。后面的示例，使用了如下图片：</p>
<p><img alt="" src="https://638183.freep.cn/638183/t23/btn/hshx.png" /></p>
<p>上面的图片尺寸为 130*127，现在，我们要在 400*200 的 svg 画布上绘制一个矩形，矩形尺寸 300*150 ，填充色是卡其色，然后通过 feImage 滤镜将上面展示的图片以 100*100 的尺寸放置其上。先看效果：</p>
<svg width="400" height="200">
<filter id="image">
<feImage x="6" y="6" width="100" height="100" xlink:href="https://638183.freep.cn/638183/t23/btn/hshx.png" result="img" />
filter="url(#image)"
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode in="img" />
</feMerge>
</filter>
<rect x="0" y="0" width="300" height="150" fill="khaki" filter="url(#image)" />
</svg>
<p>再看代码：</p>
<pre><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></pre>
<p>代码中，我们创建了一个 filter 滤镜，id 标识为 image：里面首先使用一个 feImage 滤镜，它从{6,6}开始发生作用，作用宽高都是100px，它引入一个外部图像（支持外部svg图像），滤镜快照名为 img。接着，使用 feMerge 合并滤镜，将整个整个图形（in="SourceGraphic"）和快照名为 img 的 feImage 滤镜叠加在一起。最后，rect 矩形标签调用该滤镜（filter="url(#image)"），就得出前面所展示的效果。这里提示一下：如果不使用合并滤镜，则 rect 矩形标签的 fill 属性所规定的填充色将不起作用，整个矩形的背景只有左上角的图标，可见合并滤镜在 svg 滤镜中的重要性。</p>
</div>
可以不用管原图大小，按自己想要的引用图片么？ 我试了一下100*50和50*100，看到图片不是被拉伸，而是整体缩小到长宽都50左右了。 <feBlend in="img" type="normal" />
这个是什么，为什么合并之前还要先弄个混合？是规定的么？ 还试了200*200 超出范围的图片自动隐去了。 “如果不使用合并滤镜，则 rect 矩形标签的 fill 属性所规定的填充色将不起作用”
好像不使用合并滤镜，不但卡其色的矩形看不到，400*200 的 svg 画布的黑色边框也看不到了。{:4_203:} 本帖最后由 马黑黑 于 2023-10-12 22:29 编辑
红影 发表于 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
一切根据需要设置
嗯嗯，这个应该是新知识，学习了{:4_187:} 马黑黑 发表于 2023-10-13 16:41
我同时做了几个效果，最后输出的代码没删完不必要的
哦，只展示了一个效果啊，可惜其他的没看到。 马黑黑 发表于 2023-10-13 16:42
现在这么理解可以。这个svg还有一个基于坐标系的属性，还没到时候说。
不是这么理解，是感觉中是这样呢{:4_173:}