lighting-color CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die lighting-color CSS-Eigenschaft definiert die Farbe der Lichtquelle für die <feDiffuseLighting>- und <feSpecularLighting>-SVG-Beleuchtungsfilter-Primitiven innerhalb eines SVG-<filter>. Falls 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
/* <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
Formale Definition
| Anfangswert | white |
|---|---|
| Anwendbar auf | <feDiffuseLighting> and <feSpecularLighting> elements in <svg> |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | by computed value |
Formale Syntax
lighting-color =
<color>
Beispiele
Definieren der Farbe der Filterbeleuchtung
Dieses Beispiel zeigt 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 Filterattribut hinzugefügt; hier werden die Filter angezeigt.
<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-Eigenschaften height, width, x und y. Wir fügen auch ein Hintergrundbild zum SVG hinzu, um jede Farbalphatransparenz 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 Beleuchtungsfarbwerte auf die Kind-Elemente des Filters unter Verwendung der CSS-lighting-color-Eigenschaft an. Wir verwenden eine benannte Farbe und eine 3-stellige Hexadezimalfarbe, 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 als red, aber diese Werte wurden von den CSS-lighting-color-Werten überschrieben.
Spezifikationen
| Spezifikation |
|---|
| Filter Effects Module Level 1 # LightingColorProperty |