Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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 Juli 2015.
Dieflood-colorCSS Eigenschaft definiert die Farbe der aktuellen Filter-Primitive-Subregion in<feFlood> und<feDropShadow> Elementen innerhalb eines<filter>. Wenn vorhanden, überschreibt sie dasflood-color Attribut des Elements.
Hinweis:Dieflood-color Eigenschaft gilt nur für<feFlood> und<feDropShadow> Elemente, die in einem<svg> verschachtelt sind. Sie gilt nicht für andere SVG-, HTML- oder Pseudoelemente.
Syntax
/* <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
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
Definieren der Farbe einer Filterflutung
Dieses Beispiel zeigt den grundlegenden Anwendungsfall vonflood-color und wie die CSSflood-color Eigenschaft Vorrang vor demflood-color Attribut hat.
HTML
Wir haben ein SVG mit zwei<filter> Elementen, die jeweils ein<feFlood> Kind enthalten. Jedes<feFlood> Element schließt das SVGflood-color Attribut ein, das die Farbe der Flutung alsseagreen definiert. Wir haben zwei<rect> Elemente mit einem Filter-Attribut eingebaut; hier werden die Filter angezeigt.
<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg"> <filter> <feFlood flood-color="seagreen" /> </filter> <filter> <feFlood flood-color="seagreen" /> </filter> <rect filter="url(#flood1)" /> <rect filter="url(#flood2)" /></svg>CSS
Wir definieren die Größe und Position unseres<rect> mit den CSSheight,width,x, undy Eigenschaften:
rect { width: 100px; height: 100px; x: 10px; y: 10px;}#r2 { x: 150px;}Wir wenden dann verschiedene Flutfarbwerte auf die<feFlood> Elemente mithilfe der CSSflood-color Eigenschaft an. Wir verwenden eine benannte Farbe und eine 3-stellige Hexadezimalfarbe, aber wir können jede gültige CSS-Farbsyntax verwenden:
#flood1 feFlood { flood-color: rebeccapurple;}#flood2 feFlood { flood-color: #ff3366;}Ergebnisse
Die Attribute definierten die Quadrate als seagreen, aber diese Werte wurden durch die CSSflood-color Werte überschrieben.
Spezifikationen
| Specification |
|---|
| Filter Effects Module Level 1 # FloodColorProperty |