svg : feTile 滤镜

马黑黑

mdn 这么解释 feTile 滤镜：输入图像是平铺的，结果用来填充目标。它的效果近似于一个 <pattern> 图案对象。

pattern 是一个 svg 标签，它并不简单，这里先不解释。我们要弄明白的是，滤镜 feTile 是怎么工作的。tile 作为动词的意思是，用瓦片、瓷砖铺设，fe 是 svg 滤镜前缀，所以 feTile 滤镜就是将图形平铺于对象之上。mdn 没有给出该滤镜的示例，让我勉为其难，在 400*400 的 svg 画布中心上绘制一个半径为 190px 的圆，该圆拥有自己的填充颜色，但是因为绑定了预设滤镜，填充色失效，取而代之的是以滤镜预设的图案平铺了圆对象，而且效果是，圆不再是圆，而是矩形！为什么会这样？这是因为，feTile 作用的对象是矩形，不管对象是不是矩形，最终结果都是矩形。

以下代码，滤镜 id 标识为 tile，其内的第一个滤镜是图像滤镜，预设了图像从 {0,0} 开始，宽高尺寸各为 100px，第二个滤镜是瓦片滤镜，它作用于 feImage 滤镜，作用位置从 {0，0} 开始，宽高尺寸各为 100%。circle 标签绘制一个圆，绑定滤镜 tile，最终，圆的填充色（fill）设置失效，填充内容被绑定的滤镜替代。

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

运行效果：

【附】原图：

冬天的雨

很难了，冬雨不懂的

马黑黑

冬天的雨 发表于 2023-10-16 21:19
很难了，冬雨不懂的

一通百通，一不通白不通

冬天的雨

马黑黑 发表于 2023-10-16 21:33
一通百通，一不通白不通

最后统统不通

马黑黑

冬天的雨 发表于 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
默认说它作用的对象

嗯嗯，知道了

红影

马黑黑 发表于 2023-10-16 22:25
我找过它的示例，很少很少

嗯，估计很难讲清楚吧。

马黑黑

红影 发表于 2023-10-16 23:37
嗯，估计很难讲清楚吧。

反正就酱紫

马黑黑

红影 发表于 2023-10-16 23:36
嗯嗯，知道了

马黑黑

红影 发表于 2023-10-16 23:35
这个只能自己去体会了。

我看过很多滤镜实例，基本都没有它的身影，可能因为它的实现可以使用 pattern 标签替代。

红影

马黑黑 发表于 2023-10-16 23:58
我看过很多滤镜实例，基本都没有它的身影，可能因为它的实现可以使用 pattern 标签替代。

但它肯定也有自己的作用的。

红影

马黑黑 发表于 2023-10-16 23:56
反正就酱紫

你说的 pattern 标签还没学到呢，现在觉得用这个做平铺还是挺有用途的。