flood-color

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.

Die flood-color CSS Eigenschaft definiert die Farbe der aktuellen Filterprimitive-Unterregion in <feFlood> und <feDropShadow> Elementen innerhalb eines <filter>. Wenn vorhanden, überschreibt sie das Attribut flood-color des Elements.

Hinweis: Die Eigenschaft flood-color gilt nur für die Elemente <feFlood> und <feDropShadow> innerhalb eines <svg>. Sie gilt nicht für andere SVG-, HTML- oder Pseudo-Elemente.

Syntax

css
/* <color> values */
flood-color: red;
flood-color: hsl(120deg 75% 25% / 60%);
flood-color: currentcolor;

/* Global values */
flood-color: inherit;
flood-color: initial;
flood-color: revert;
flood-color: revert-layer;
flood-color: unset;

Werte

<color>

Die Farbe des Floods. Dies kann ein beliebiger gültiger CSS <color> Wert sein.

Formale Definition

Anfangswertblack
Anwendbar auf<feFlood> and <feDropShadow> elements in <svg>
VererbtNein
Berechneter Wertwie angegeben
Animationstypby computed value

Formale Syntax

flood-color = 
  <color>

Beispiele

Die Farbe eines Filters Flood definieren

Dieses Beispiel demonstriert die grundlegende Verwendung von flood-color und wie die CSS-Eigenschaft flood-color Vorrang vor dem Attribut flood-color hat.

HTML

Wir haben ein SVG mit zwei <filter> Elementen, die jeweils ein <feFlood> Kind enthalten. Jedes <feFlood> Element beinhaltet das SVG-Attribut flood-color, das die Flood-Farbe als seagreen festlegt. Wir haben zwei <rect> Elemente mit einem Filterattribut eingefügt; hier werden die Filter angezeigt.

html
<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feFlood flood-color="seagreen" />
  </filter>
  <filter id="flood2">
    <feFlood flood-color="seagreen" />
  </filter>

  <rect id="r1" filter="url(#flood1)" />
  <rect id="r2" filter="url(#flood2)" />
</svg>

CSS

Wir definieren die Größe und Position unseres <rect> mit den CSS-Eigenschaften height, width, x und y:

css
rect {
  width: 100px;
  height: 100px;
  x: 10px;
  y: 10px;
}
#r2 {
  x: 150px;
}

Dann wenden wir verschiedene Flood-Farbwerte auf die <feFlood> Elemente mit der CSS-Eigenschaft flood-color an. Wir verwenden eine benannte Farbe und eine 3-stellige hexadezimale Farbe, aber wir können jede gültige CSS-Farbsyntax verwenden:

css
#flood1 feFlood {
  flood-color: rebeccapurple;
}
#flood2 feFlood {
  flood-color: #f36;
}

Ergebnisse

Die Attribute haben die Quadrate als seagreen definiert, aber diese Werte wurden durch die CSS flood-color Werte überschrieben.

Spezifikationen

Specification
Filter Effects Module Level 1
# FloodColorProperty

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch