SVG feFlood过滤器介绍

SVG（Scalable Vector Graphics）是一种XML标记语言，用于描述二维矢量图形。feFlood过滤器是SVG中用于填充指定区域的一种滤镜效果。在本篇文章中，我们将介绍SVG中的feFlood过滤器的用法和效果。

feFlood过滤器

feFlood过滤器用于在指定区域内填充给定颜色。一般情况下，feFlood过滤器与其他滤镜效果（如feComposite、feGaussianBlur等）结合使用，以创建更加复杂的效果。feFlood过滤器可以通过以下属性进行配置：

flood-color

flood-color属性指定用于填充区域的颜色值。该属性的取值可以是任何合法的CSS颜色值，包括十六进制、RGB、RGBA等格式。例如，以下代码将指定一个红色的填充颜色：

<filter>
  <feFlood flood-color="red" />
<filter>

flood-opacity

flood-opacity属性指定填充颜色的不透明度。该属性的取值范围为0（完全透明）到1（完全不透明）。例如，以下代码将指定一个半透明的填充颜色：

<filter>
  <feFlood flood-color="red" flood-opacity="0.5" />
<filter>

示例

下面的示例展示了一个使用feFlood过滤器的SVGRect元素：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <filter id="floodFilter">
      <feFlood flood-color="red" flood-opacity="0.5" />
      <feComposite operator="atop" in2="SourceGraphic" />
    </filter>
  </defs>

  <rect x="10" y="10" width="80" height="80" fill="#333" filter="url(#floodFilter)" />
</svg>

codepen演示

本文示例已上传到codepen，点击这里查看效果。