La primitive de filtre SVG <feSpecularLighting> éclaire une image en utilisant son canal alpha en tant que relief. L'image résultante est une image RGBA qui dépend de la couleur de la lumière, de sa position et du relief de l'image en entrée. Le calcul de l'éclarage se fait suivant le modèle d'illumination de Phong.

La lumière crée par cette primitive de filtre peut être combinée avec une image de texture à l'aide de l'opérateur arithmetic de la primitive de filtre <feComposite>. De multiples sources lumineuses peuvent être simulées en ajoutant plusieurs éléments à la texture.

Contexte d'utilisation

CatégoriesÉlément de filtre
Contenu autoriséExactly one light source element first and any number of descriptive elements in any order.

Attributs

Attributs globaux

Attributs spécifiques

Interface DOM

Cet élément implémente l'interface SVGFESpecularLightingElement.

Exemple

<svg height="200" width="200" viewBox="0 0 220 220"
    xmlns="http://www.w3.org/2000/svg">
  <filter id = "filter">
    <feSpecularLighting result="specOut"
        specularExponent="20" lighting-color="#bbbbbb">
      <fePointLight x="50" y="75" z="200"/>
    </feSpecularLighting>
    <feComposite in="SourceGraphic" in2="specOut"
        operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
  </filter>
  <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/>
</svg>

Résultat

Spécifications

Spécification Statut Commentaire
Filter Effects Module Level 1
La définition de '<feSpecularLighting>' dans cette spécification.
Version de travail Suppression de la limitation sur l'attribut specularExponent.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<feSpecularLighting>' dans cette spécification.
Recommendation Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet OuiOpera Support complet 9Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
inChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet OuiOpera Support complet 9Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
kernelUnitLengthChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
specularConstantChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet OuiOpera Support complet 9Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
specularExponentChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet OuiOpera Support complet 9Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
surfaceScaleChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : a-mt
Dernière mise à jour par : a-mt,