<feSpecularLighting>
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.
Das <feSpecularLighting>
SVG Filter-Primitive beleuchtet eine Ausgangsgrafik unter Verwendung des Alphakanals als Bump-Map. Das resultierende Bild ist ein RGBA-Bild basierend auf der Lichtfarbe. Die Beleuchtungsberechnung folgt der standardmäßigen spekulären Komponente des Phong-Beleuchtungsmodells. Das resultierende Bild hängt von der Lichtfarbe, der Lichtposition und der Oberflächengestaltung der Eingabebumpmap ab. Das Ergebnis der Beleuchtungsberechnung wird hinzugefügt. Das Filter-Primitive geht davon aus, dass der Betrachter in der z-Richtung im Unendlichen ist.
Dieses Filter-Primitive erzeugt ein Bild, das den spekulären Reflexionsteil der Beleuchtungsberechnung enthält. Eine solche Karte soll mit einer Textur unter Verwendung des add
Terms der arithmetischen Methode <feComposite>
kombiniert werden. Mehrere Lichtquellen können simuliert werden, indem mehrere dieser Lichtkarten hinzugefügt werden, bevor sie auf das Texturbild angewendet werden.
Verwendungskontext
Kategorien | Primitives Filterelement |
---|---|
Erlaubter Inhalt | Exactly one light source element first and any number of descriptive elements in any order. |
Attribute
DOM-Schnittstelle
Dieses Element implementiert die Schnittstelle SVGFESpecularLightingElement
.
Beispiel
<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>
Ergebnis
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # feSpecularLightingElement |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
<filter>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<fePointLight>
<feSpotLight>
<feTile>
<feTurbulence>
- SVG-Tutorial: Filtereffekte