svg : feTile 滤镜
本帖最后由 马黑黑 于 2023-10-16 20:15 编辑 <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; }
.ma > svg { border: 1px solid gray; }
</style>
<div class="ma">
<p>mdn 这么解释 feTile 滤镜：输入图像是平铺的，结果用来填充目标。它的效果近似于一个 <pattern> 图案对象。</p>
<p>pattern 是一个 svg 标签，它并不简单，这里先不解释。我们要弄明白的是，滤镜 feTile 是怎么工作的。tile 作为动词的意思是，用瓦片、瓷砖铺设，fe 是 svg 滤镜前缀，所以 feTile 滤镜就是将图形平铺于对象之上。mdn 没有给出该滤镜的示例，让我勉为其难，在 400*400 的 svg 画布中心上绘制一个半径为 190px 的圆，该圆拥有自己的填充颜色，但是因为绑定了预设滤镜，填充色失效，取而代之的是以滤镜预设的图案平铺了圆对象，而且效果是，圆不再是圆，而是矩形！为什么会这样？这是因为，feTile 作用的对象是矩形，不管对象是不是矩形，最终结果都是矩形。</p>
<p>以下代码，滤镜 id 标识为 tile，其内的第一个滤镜是图像滤镜，预设了图像从 {0,0} 开始，宽高尺寸各为 100px，第二个滤镜是瓦片滤镜，它作用于 feImage 滤镜，作用位置从 {0，0} 开始，宽高尺寸各为 100%。circle 标签绘制一个圆，绑定滤镜 tile，最终，圆的填充色（fill）设置失效，填充内容被绑定的滤镜替代。</p>
<pre><svg width="400" height="400" style="border: 1px solid gray;">
<filter id="tile">
<feImage x="0" y="0" width="100" height="100" href="https://638183.freep.cn/638183/t23/btn/hshx.png" result="img"></feImage>
<feTile x="0" y="0" width="100%" height="100%" in="img"></feTile>
</filter>
<circle cx="200" cy="200" r="190" fill="steelblue" filter="url(#tile)" />
</svg></pre>
<p>运行效果：</p>
<svg width="400" height="400" style="border: 1px solid gray;">
<filter id="tile">
<feImage x="0" y="0" width="100" height="100" href="https://638183.freep.cn/638183/t23/btn/hshx.png" result="img"></feImage>
<feTile x="0" y="0" width="100%" height="100%" in="img"></feTile>
</filter>
<circle cx="200" cy="200" r="190" fill="steelblue" filter="url(#tile)"></circle>
</svg>
<p>【附】原图：<br><br><img src="https://638183.freep.cn/638183/t23/btn/hshx.png" alt=""></p>
</div> 很难了，冬雨不懂的 冬天的雨 发表于 2023-10-16 21:19
很难了，冬雨不懂的
一通百通，一不通白不通 马黑黑 发表于 2023-10-16 21:33
一通百通，一不通白不通
最后统统不通{:4_170:} 冬天的雨 发表于 2023-10-16 21:33
最后统统不通
不通则痛 马黑黑 发表于 2023-10-16 21:34
不通则痛
现在就是通不了啊 <feTile x="0" y="0" width="100%" height="100%" in="img"></feTile>
这个里的width="100%" height="100%"是谁的宽高？是svg的还是图片的？ 去pencilcode试了一下，知道了，那个100%是指svg的。
这里面的几个x y和cx cy的设置挺复杂，我想取一半，也就是剩4个小图，放在左上挺容易。取<feTile x="0" y="0" width="200" height="200" in="img">和<circle cx="100" cy="100" r="100" ……>就行了，放当中我设了feTile x="100" y="100" 以为cx xy也得变位才匹配，结果cx xy不能动，动了就看不到了。 这个就是在某个范围内平铺吧，有点复杂呢。 红影 发表于 2023-10-16 22:20
去pencilcode试了一下，知道了，那个100%是指svg的。
这里面的几个x y和cx cy的设置挺复杂，我想取一半， ...
feTile 滤镜 mdn 不举例，说明它不是很好控制，或是不容易说清楚 红影 发表于 2023-10-16 22:10
这个里的width="100%" height="100%"是谁的宽高？是svg的还是图片的？
默认说它作用的对象 红影 发表于 2023-10-16 22:22
这个就是在某个范围内平铺吧，有点复杂呢。
我找过它的示例，很少很少 马黑黑 发表于 2023-10-16 22:23
feTile 滤镜 mdn 不举例，说明它不是很好控制，或是不容易说清楚
这个只能自己去体会了。 马黑黑 发表于 2023-10-16 22:23
默认说它作用的对象
嗯嗯，知道了{:4_204:} 马黑黑 发表于 2023-10-16 22:25
我找过它的示例，很少很少
嗯，估计很难讲清楚吧。 红影 发表于 2023-10-16 23:37
嗯，估计很难讲清楚吧。
反正就酱紫 红影 发表于 2023-10-16 23:36
嗯嗯，知道了
{:4_190:} 红影 发表于 2023-10-16 23:35
这个只能自己去体会了。
我看过很多滤镜实例，基本都没有它的身影，可能因为它的实现可以使用 pattern 标签替代。 马黑黑 发表于 2023-10-16 23:58
我看过很多滤镜实例，基本都没有它的身影，可能因为它的实现可以使用 pattern 标签替代。
但它肯定也有自己的作用的。 马黑黑 发表于 2023-10-16 23:56
反正就酱紫
你说的 pattern 标签还没学到呢，现在觉得用这个做平铺还是挺有用途的。