svg : feFlood 滤镜
<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>feFlood 滤镜规定在 {x,y} 坐标处开始，在 svg 画布上以 width 宽度、height 高度填充颜色（flood-color）和不透明度（flood-opacity）。试看如下代码：</p>
<pre><feFloodx="110" y="10" width="90" height="90" flood-color="blue" flood-opacity="0.6" /></pre>
<p>应用了上述滤镜的 svg 子元素，将从 svg 坐标系的 {110,10} 坐标点开始，宽高各 90px，以蓝色填充，不透明度为 0.6。</p>
<p>下面的示例，我们在 svg 画布上绘制两个矩形，第一个矩形用蓝色填充，没有使用滤镜；第二个矩形用红色填充，使用 id="flood" 的滤镜，该滤镜仅有 feFlood 滤镜，它规定从 {110,10} 坐标处产生作用，作用宽高各为 90px，其数值皆与第二个矩形一样，然后滤镜用蓝色填充、不透明度为 0.6，注意比较两个矩形的效果：</p>
<svg width="210" height="110">
<filter id="flood">
<feFloodx="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>
<p>上述效果的完整代码：</p>
<pre><svg width="210" height="110">
<filter id="flood">
<feFloodx="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" <span class="rred">fill="red"</span> filter="url(#flood)" />
</svg></pre>
<p>第二个矩形蓝色填充色的设定 <span class="rred">fill="red"</span> 完全无效，原因在于该矩形调用了 <span class="rred">id="flood"</span> 的滤镜效果，它只能按照 feFlood 滤镜设定的填充效果去渲染自己。</p>
</div>
小辣椒一下子不够理解{:4_198:} 小辣椒 发表于 2023-10-13 21:58
小辣椒一下子不够理解
代码滤镜很抽象的 第一个是原来的色彩，第二个是用feFlood 滤镜设定的去填充的，能看出带透明度呢。 这个没用混合么，是不是混一下红色的就起作用了？ 红影 发表于 2023-10-13 22:13
这个没用混合么，是不是混一下红色的就起作用了？
滤镜一般都是多个滤镜共同作用。这里仅是介绍滤镜，能不做合并尽量不做，以免干扰对滤镜的理解。 马黑黑 发表于 2023-10-13 22:58
滤镜一般都是多个滤镜共同作用。这里仅是介绍滤镜，能不做合并尽量不做，以免干扰对滤镜的理解。
嗯嗯，知道了，原来只是纯粹讲解这个{:4_204:} 红影 发表于 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{:4_173:} 红影 发表于 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有相似之处呢，可以两个结合起来看。都是得到滤镜渲染后的效果。
对，滤镜就是组合滤镜