SVG 元素介绍

SVG（可缩放矢量图形）是基于XML（可扩展标记语言）的一种标记语言，用于描述二维矢量图形。SVG 可以缩放到任意大小而不失真。<feFlood> 元素是 SVG 中的一个滤镜元素，用于创建填充颜色的效果。

概述

<feFlood> 元素表示一种颜色填充的方法，类似于 CSS 的 background-color 属性。滤镜可以被 <filter> 元素引用并应用于一个元素或者一个文本块上。

语法

下面是 <feFlood> 元素的基本语法：

<feFlood [属性列表]/>

属性

<feFlood> 元素可以有以下属性：

• flood-color：定义填充的颜色。可以是一个颜色值，也可以是表示渐变的引用。
• flood-opacity：定义填充颜色的透明度。取值范围是 0 到 1。

使用示例

下面是一个使用 <feFlood> 元素的示例代码片段：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="myFilter">
    <feFlood flood-color="blue" flood-opacity="0.5" />
  </filter>
  <rect x="0" y="0" width="200" height="200" fill="#fff" filter="url(#myFilter)" />
</svg>

上述代码创建了一个 SVG 元素，设置了宽度和高度为 200 像素。定义了一个名为 myFilter 的滤镜元素，其中 <feFlood> 元素的 flood-color 属性被设置为 blue，且 flood-opacity 属性被设置为 0.5。最后，一个矩形元素被创建，颜色被设置为白色。filter 属性指定滤镜应用于该矩形。

参考链接

• SVG 元素 - MDN Web 文档中心