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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flood-color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch