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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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

Anfangswert	`black`
Anwendbar auf	`<feFlood>` and `<feDropShadow>` elements in `<svg>`
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	by 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