<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

KategorienPrimitives Filterelement
Erlaubter InhaltExactly one light source element first and any number of descriptive elements in any order.

Attribute

DOM-Schnittstelle

Dieses Element implementiert die SVGFESpecularLightingElement-Schnittstelle.

Beispiel

html
<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