lighting-color

Syntaxe

/* Valeurs de type <color> */
lighting-color: red;
lighting-color: hsl(120deg 75% 25% / 60%);
lighting-color: currentColor;

/* Valeurs globales */
lighting-color: inherit;
lighting-color: initial;
lighting-color: revert;
lighting-color: revert-layer;
lighting-color: unset;

Valeurs

<color>

La couleur de l'éclairage. Cela peut être n'importe quelle valeur CSS <color> valide.

Définition formelle

Syntaxe formelle

lighting-color = 
  <color>  

Exemples

Définir la couleur de l'éclairage du filtre

Cet exemple montre le cas d'utilisation de base de lighting-color, et comment la propriété CSS lighting-color prend le dessus sur l'attribut lighting-color.

HTML

Nous avons un SVG avec deux éléments <filter>, l'un avec un enfant <feDiffuseLighting> et l'autre avec un enfant <feSpecularLighting>. Chacun inclut l'attribut SVG lighting-color définissant la couleur de l'éclairage à red. Ces deux enfants possèdent un <fePointLight>, l'enfant requis qui définit la source lumineuse. Nous avons inclus deux éléments <rect> avec un attribut de filtre ; c'est là que les filtres seront affichés.

<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

Nous définissons la taille et la position de notre <rect> à l'aide des propriétés CSS height, width, x et y. Nous ajoutons également une image d'arrière-plan au SVG pour rendre toute transparence alpha de couleur plus visible :

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;
}

Nous appliquons ensuite différentes valeurs de couleur d'éclairage aux éléments enfants du filtre à l'aide de la propriété CSS lighting-color. Nous utilisons une couleur nommée et une couleur hexadécimale à 3 chiffres, mais nous pouvons utiliser n'importe quelle syntaxe de couleur CSS valide :

feDiffuseLighting {
  lighting-color: blue;
}

feSpecularLighting {
  lighting-color: #ff0099;
}

Résultats

Les attributs ont défini la couleur des deux filtres lumineux comme red, mais ces valeurs ont été remplacées par les valeurs CSS lighting-color.

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété color
• La propriété fill
• La propriété flood-color
• La propriété stop-color
• La propriété stroke
• La propriété flood-opacity
• La propriété background-color
• Le type de donnée <color>
• Le type de donnée <filter-function>
• L'attribut SVG lighting-color