svg : feFlood 滤镜

马黑黑

feFlood 滤镜规定在 {x,y} 坐标处开始，在 svg 画布上以 width 宽度、height 高度填充颜色（flood-color）和不透明度（flood-opacity）。试看如下代码：

<feFlood  x="110" y="10" width="90" height="90" flood-color="blue" flood-opacity="0.6" />

应用了上述滤镜的 svg 子元素，将从 svg 坐标系的 {110,10} 坐标点开始，宽高各 90px，以蓝色填充，不透明度为 0.6。

下面的示例，我们在 svg 画布上绘制两个矩形，第一个矩形用蓝色填充，没有使用滤镜；第二个矩形用红色填充，使用 id="flood" 的滤镜，该滤镜仅有 feFlood 滤镜，它规定从 {110,10} 坐标处产生作用，作用宽高各为 90px，其数值皆与第二个矩形一样，然后滤镜用蓝色填充、不透明度为 0.6，注意比较两个矩形的效果：

上述效果的完整代码：

<svg width="210" height="110">
	<filter id="flood">
		<feFlood  x="110" y="10" width="90" height="90" flood-color="blue" flood-opacity="0.6" />
	</filter>
	<rect x="10" y="10" width="90" height="90" fill="blue" />
	<rect x="110" y="10" width="90" height="90" fill="red" filter="url(#flood)" />
</svg>

第二个矩形蓝色填充色的设定 fill="red" 完全无效，原因在于该矩形调用了 id="flood" 的滤镜效果，它只能按照 feFlood 滤镜设定的填充效果去渲染自己。

小辣椒

小辣椒一下子不够理解

马黑黑

小辣椒 发表于 2023-10-13 21:58
小辣椒一下子不够理解

代码滤镜很抽象的

红影

第一个是原来的色彩，第二个是用feFlood 滤镜设定的去填充的，能看出带透明度呢。

红影

这个没用混合么，是不是混一下红色的就起作用了？

马黑黑

红影 发表于 2023-10-13 22:13
这个没用混合么，是不是混一下红色的就起作用了？

滤镜一般都是多个滤镜共同作用。这里仅是介绍滤镜，能不做合并尽量不做，以免干扰对滤镜的理解。

红影

马黑黑 发表于 2023-10-13 22:58
滤镜一般都是多个滤镜共同作用。这里仅是介绍滤镜，能不做合并尽量不做，以免干扰对滤镜的理解。

嗯嗯，知道了，原来只是纯粹讲解这个

马黑黑

红影 发表于 2023-10-13 23:44
嗯嗯，知道了，原来只是纯粹讲解这个

看标题

红影

马黑黑 发表于 2023-10-14 08:14
看标题

嗯，这样和原图对比着看很清晰。

马黑黑

红影 发表于 2023-10-13 22:12
第一个是原来的色彩，第二个是用feFlood 滤镜设定的去填充的，能看出带透明度呢。

feFlood 的 flood-opacity 专门设置滤镜的透明效果

红影

马黑黑 发表于 2023-10-14 12:18
feFlood 的 flood-opacity 专门设置滤镜的透明效果

是的，可以带透明度了。

马黑黑

红影 发表于 2023-10-14 17:03
是的，可以带透明度了。

这是它的效果

红影

马黑黑 发表于 2023-10-14 22:14
这是它的效果

可以填充颜色以及设置透明度。

马黑黑

红影 发表于 2023-10-14 23:34
可以填充颜色以及设置透明度。

它专干这个事

红影

马黑黑 发表于 2023-10-15 07:33
它专干这个事

能替代简单的fill

马黑黑

红影 发表于 2023-10-15 11:25
能替代简单的fill

它不替代，而是提供另一种方案

红影

马黑黑 发表于 2023-10-15 22:01
它不替代，而是提供另一种方案

嗯嗯，一种更加细致的方案。

马黑黑

红影 发表于 2023-10-15 22:29
嗯嗯，一种更加细致的方案。

也要看它的适用环境

红影

马黑黑 发表于 2023-10-16 17:37
也要看它的适用环境

这个和今天介绍的 feTile有相似之处呢，可以两个结合起来看。都是得到滤镜渲染后的效果。

马黑黑

红影 发表于 2023-10-16 23:08
这个和今天介绍的 feTile有相似之处呢，可以两个结合起来看。都是得到滤镜渲染后的效果。

对，滤镜就是组合滤镜