<feDiffuseLighting>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Der <feDiffuseLighting>
SVG Filter-Primitiv beleuchtet ein Bild, indem er den Alpha-Kanal als Bump-Map verwendet. Das resultierende Bild, welches ein undurchsichtiges RGBA-Bild ist, hängt von der Lichtfarbe, der Lichtposition und der Oberflächengeometrie der Eingabe-Bump-Map ab.
Die von diesem Filter-Primitiv erzeugte Lichtkarte kann mit einem Texturbild unter Verwendung des Multiplikationsterms des arithmetic
-Operators des <feComposite>
Filter-Primitivs kombiniert werden. Mehrere Lichtquellen können simuliert werden, indem mehrere dieser Lichtkarten kombiniert werden, bevor sie auf das Texturbild angewendet werden.
Verwendungszusammenhang
Kategorien | Primitives Filterelement |
---|---|
Erlaubter Inhalt | Any number of descriptive elements and exactly one light source element, in any order. |
Attribute
DOM-Interface
Dieses Element implementiert das SVGFEDiffuseLightingElement
Interface.
Beispiel
Das folgende Beispiel zeigt die Wirkung des <feDiffuseLighting>
Elements auf einen Kreis mit jeder verfügbaren Lichtquelle. Jedes Mal kommt das Licht aus der oberen linken Ecke.
<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg">
<!-- No light is applied -->
<text text-anchor="middle" x="60" y="22">No Light</text>
<circle cx="60" cy="80" r="50" fill="green" />
<!-- the light source is a fePointLight element -->
<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)" />
<!-- the light source is a feDistantLight element -->
<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)" />
<!-- the light source is a feSpotLight source -->
<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>
Erwartetes Rendering:
Live-Rendering:
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # feDiffuseLightingElement |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Attribute von SVG-Filter-Primitiven
<filter>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
- SVG-Tutorial: Filtereffekte