Dielighting-colorCSS Eigenschaft legt die Farbe der Lichtquelle für die<feDiffuseLighting> und<feSpecularLighting> SVG-Lichtfilter-Primitiven in einem SVG-<filter> fest. Wenn vorhanden, überschreibt sie daslighting-color Attribut des Elements.

Syntax

/* <color> values */lighting-color: red;lighting-color: hsl(120deg 75% 25% / 60%);lighting-color: currentColor;/* Global values */lighting-color: inherit;lighting-color: initial;lighting-color: revert;lighting-color: revert-layer;lighting-color: unset;

Werte

<color>

Die Farbe des Lichts. Dies kann jeder gültige CSS<color> Wert sein.

Formale Definition

Formale Syntax

lighting-color =
<color>

Beispiele

Definition der Farbe von Filterlicht

Dieses Beispiel demonstriert die grundlegende Verwendung vonlighting-color und wie die CSSlighting-color Eigenschaft daslighting-color Attribut überschreibt.

HTML

Wir haben ein SVG mit zwei<filter>-Elementen, eines mit einem<feDiffuseLighting> und eines mit einem<feSpecularLighting> Kind. Jedes enthält das SVGlighting-color Attribut, das die Beleuchtungsfarbe alsred definiert. Beide dieser Kinder haben ein<fePointLight>, das erforderliche Kind, das die Lichtquelle festlegt. Wir haben zwei<rect>-Elemente mit einem Filterattribut hinzugefügt; hier werden die Filter angezeigt.

<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">  <filter>    <feDiffuseLighting lighting-color="red">      <fePointLight x="75" y="30" z="10" />    </feDiffuseLighting>  </filter>  <filter>    <feSpecularLighting specularExponent="5" lighting-color="red">      <fePointLight x="225" y="75" z="5" />    </feSpecularLighting>  </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. Wir fügen dem SVG auch ein Hintergrundbild hinzu, um jegliche Farb-Alphatransparenz deutlicher zu machen:

svg {  background-image: repeating-linear-gradient(    45deg,    transparent 0 9px,    #cccccc 0px 10px  );}rect {  width: 100px;  height: 100px;  x: 10px;  y: 10px;}#r2 {  x: 150px;}

Dann wenden wir unterschiedliche Beleuchtungsfarbenwerte auf die Kinderelemente des Filters mit der CSSlighting-color Eigenschaft an. Wir verwenden eine benannte Farbe und eine 3-stellige hexadezimale Farbe, aber wir können jede gültige CSS-Farbsyntax verwenden:

feDiffuseLighting {  lighting-color: blue;}feSpecularLighting {  lighting-color: #ff0099;}

Ergebnisse

Die Attribute definierten die Farbe beider Lichtfilter alsred, aber diese Werte wurden durch die CSSlighting-color Werte überschrieben.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• color
• fill
• flood-color
• stop-color
• stroke
• flood-opacity
• background-color
• <color>
• <filter-function>
• SVGlighting-color Attribut