← 返回首页

<feFlood> - SVG | MDN

Toggle sidebar

Theme

OS default
Light
Dark

English (US)

Remember language Learn more

<feFlood>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The <feFlood> SVG filter primitive fills the filter subregion with the color and opacity defined by flood-color and flood-opacity.

In this article

Usage context

CategoriesPermitted content

Filter primitive element

Any number of the following elements, in any order:
<animate>, <set>

Attributes

flood-color
flood-opacity
Filter primitive attributes: x, y, width, height, result

DOM Interface

This element implements the SVGFEFloodElement interface.

Example

HTML

html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <defs>
    <filter id="floodFilter" filterUnits="userSpaceOnUse">
      <feFlood
        x="50"
        y="50"
        width="100"
        height="100"
        flood-color="green"
        flood-opacity="0.5" />
    </filter>
  </defs>

  <use filter="url(#floodFilter)" />
</svg>

Result

Specifications

Specification

Filter Effects Module Level 1
# feFloodElement

Browser compatibility

Enable JavaScript to view this browser compatibility table.

See also

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Oct 27, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content