<feSpecularLighting>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Das <feSpecularLighting> SVG Filter-Primitive beleuchtet eine Quellgrafik, indem der Alphakanal als Bump-Map verwendet wird. Das resultierende Bild ist ein RGBA-Bild basierend auf der Lichtfarbe. Die Lichtberechnung folgt der Standard-Glanzlichtkomponente des Phong-Beleuchtungsmodells. Das resultierende Bild hängt von der Lichtfarbe, der Lichtposition und der Oberflächengeometrie der Eingangs-Bump-Map ab. Das Ergebnis der Lichtberechnung wird hinzugefügt. Das Filter-Primitive nimmt an, dass der Betrachter in der z-Richtung im Unendlichen ist.

Dieses Filter-Primitive erzeugt ein Bild, das den spekularen Reflexionsteil der Lichtberechnung enthält. Eine solche Karte soll mit einer Textur unter Verwendung des add-Begriffs 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.

Wie andere Filter-Primitives verarbeitet es Farbkomponenten standardmäßig im linearRGB Farbraum. Sie können color-interpolation-filters verwenden, um stattdessen sRGB zu verwenden.

Verwendungskontext

Kategorien	Primitives Filterelement
Erlaubter Inhalt	Exactly one light source element first and any number of descriptive elements in any order.

<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" filter="url(#filter)" />
</svg>