<feDiffuseLighting>

La primitive de filtre SVG <feDiffuseLighting> éclaire une image en utilisant son canal alpha en tant que relief. L'image résultante, qui est une image RGBA opaque, dépend de la couleur de la lumière, de sa position et du relief de l'image en entrée.

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éAny number of descriptive elements and exactly one light source element, in any order.

Attributs

Attributs globaux

Attributs spécifiques

Interface DOM

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

Exemple

L'exemple suivant montre l'effet de l'élément <feDiffuseLighting> sur un cercle avec chaque type de lumière disponible. À chaque fois, la lumière vient du coin supérieur gauche.

<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg">

  <!-- Aucune lumière n'est appliquée -->
  <text text-anchor="middle" x="60" y="22">No Light</text>
  <circle cx="60" cy="80" r="50" fill="green" />

  <!-- La source lumineuse est un élément fePointLight -->
  <text text-anchor="middle" x="170" y="22">fePointLight</text>
  <filter id="lightMe1">
    <feDiffuseLighting in="SourceGraphic" result="light"
        lighting-color="white">
      <fePointLight x="150" y="60" z="20" />
    </feDiffuseLighting>

    <feComposite in="SourceGraphic" in2="light"
                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
  </filter>

  <circle cx="170" cy="80" r="50" fill="green"
      filter="url(#lightMe1)" />

  <!-- La source lumineuse est un élément feDistantLight -->
  <text text-anchor="middle" x="280" y="22">feDistantLight</text>
  <filter id="lightMe2">
    <feDiffuseLighting in="SourceGraphic" result="light"
        lighting-color="white">
      <feDistantLight azimuth="240" elevation="20"/>
    </feDiffuseLighting>

    <feComposite in="SourceGraphic" in2="light"
                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
  </filter>

  <circle cx="280" cy="80" r="50" fill="green"
      filter="url(#lightMe2)" />

  <!-- La source lumineuse est un élément feSpotLight -->
  <text text-anchor="middle" x="390" y="22">feSpotLight</text>
  <filter id="lightMe3">
    <feDiffuseLighting in="SourceGraphic" result="light"
        lighting-color="white">
      <feSpotLight x="360" y="5" z="30" limitingConeAngle="20"
                   pointsAtX="390" pointsAtY="80" pointsAtZ="0"/>
    </feDiffuseLighting>

    <feComposite in="SourceGraphic" in2="light"
                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
  </filter>

  <circle cx="390" cy="80" r="50" fill="green"
      filter="url(#lightMe3)" />
</svg>

Résultat attendu:

Expected rendering for the example

Rendu en direct:

Spécifications

Spécification Statut Commentaire
Filter Effects Module Level 1
La définition de '<feDiffuseLighting>' dans cette spécification.
Version de travail Déprécie l'attribut kernelUnitLength
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<feDiffuseLighting>' dans cette spécification.
Recommendation Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
feDiffuseLightingChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari ? WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android Support complet Oui
diffuseConstantChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
inChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari ? WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android Support complet Oui
kernelUnitLengthChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
surfaceScaleChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi