lighting-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 lighting-color CSS Eigenschaft definiert die Farbe der Lichtquelle für die <feDiffuseLighting> und <feSpecularLighting> SVG-Beleuchtungsfilter-Primitiven innerhalb eines SVG-<filter>. Wenn vorhanden, überschreibt sie das lighting-color-Attribut des Elements.

Hinweis: Die lighting-color-Eigenschaft gilt nur für <feDiffuseLighting> und <feSpecularLighting>-Elemente, die in einem <svg> verschachtelt sind. Sie gilt nicht für andere SVG-, HTML- oder Pseudo-Elemente.

Syntax

css
/* <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 jeden gültigen CSS <color> Wert annehmen.

Formale Definition

Anfangswertwhite
Anwendbar auf<feDiffuseLighting> and <feSpecularLighting> elements in <svg>
VererbtNein
Berechneter Wertwie angegeben
Animationstypby computed value

Formale Syntax

lighting-color = 
<color>

Beispiele

Definieren der Farbe der Filterbeleuchtung

Dieses Beispiel demonstriert den grundlegenden Anwendungsfall von lighting-color und wie die CSS lighting-color Eigenschaft das lighting-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 SVG lighting-color Attribut, das die Beleuchtungsfarbe als red definiert. Beide dieser Kinder haben ein <fePointLight>, das erforderliche Kind, das die Lichtquelle setzt. Wir haben zwei <rect>-Elemente mit einem Filter-Attribut eingefügt; hier werden die Filter angezeigt.

html
<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feDiffuseLighting lighting-color="red">
      <fePointLight x="75" y="30" z="10" />
    </feDiffuseLighting>
  </filter>
  <filter id="flood2">
    <feSpecularLighting specularExponent="5" lighting-color="red">
      <fePointLight x="225" y="75" z="5" />
    </feSpecularLighting>
  </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 height, width, x, und y Eigenschaften. Wir fügen dem SVG auch ein Hintergrundbild hinzu, um jede Farbalpha-Transparenz deutlicher zu machen:

css
svg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    #ccc 0px 10px
  );
}

rect {
  width: 100px;
  height: 100px;
  x: 10px;
  y: 10px;
}

#r2 {
  x: 150px;
}

Wir wenden dann verschiedene Beleuchtungsfarbwerte auf die Kindelemente des Filters mit der CSS lighting-color Eigenschaft an. Wir verwenden eine benannte Farbe und eine 3-stellige hexadezimale Farbe, aber wir können jede gültige CSS-Farbsyntax verwenden:

css
feDiffuseLighting {
  lighting-color: blue;
}

feSpecularLighting {
  lighting-color: #f09;
}

Ergebnisse

Die Attribute definierten die Farbe beider Lichtfilter als red, aber diese Werte wurden von den CSS lighting-color Werten überschrieben.

Spezifikationen

Specification
Filter Effects Module Level 1
# LightingColorProperty

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
lighting-color

Legend

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

Full support
Full support

Siehe auch