<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.
* Some parts of this feature may have varying levels of support.
Die <feSpecularLighting>
-SVG-Filterprimitive beleuchtet eine Quellgrafik unter Verwendung des Alphakanals als Bump-Map. Das resultierende Bild ist ein RGBA-Bild basierend auf der Lichtfarbe. Die Lichtberechnung folgt der standardmäßigen spekulären Komponente des Phong-Beleuchtungsmodells. Das resultierende Bild hängt von der Lichtfarbe, der Lichtposition und der Oberflächengeometrie der Eingabe-Bump-Map ab. Das Ergebnis der Lichtberechnung wird hinzugefügt. Die Filterprimitive geht davon aus, dass der Betrachter in der z-Richtung unendlich weit entfernt ist.
Diese Filterprimitive erzeugt ein Bild, das den spekulären Reflexionsteil der Lichtberechnung enthält. Eine solche Map ist dazu gedacht, mit einer Textur unter Verwendung des add
-Operators der arithmetischen <feComposite>
-Methode kombiniert zu werden. Mehrere Lichtquellen können simuliert werden, indem mehrere dieser Licht-Maps hinzugefügt werden, bevor sie auf das Texturbild angewendet werden.
Wie andere Filterprimitiven verarbeitet sie Farbkomponenten standardmäßig im linearRGB
-Farbraum. Sie können color-interpolation-filters
verwenden, um stattdessen sRGB
zu nutzen.
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 SVGFESpecularLightingElement
-Schnittstelle.
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