<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 primitive 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:
Rendu en direct:
Spécifications
Specification |
---|
Filter Effects Module Level 1 # feDiffuseLightingElement |
Compatibilité des navigateurs
BCD tables only load in the browser