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

Das <feDiffuseLighting> SVG-Filterprimitive beleuchtet ein Bild, wobei der Alphakanal als Bump-Map verwendet wird. Das resultierende Bild, ein undurchsichtiges RGBA-Bild, hängt von der Lichtfarbe, der Lichtposition und der Oberflächengeometrie der Eingabe-Bump-Map ab.

Die von diesem Filterprimitive erzeugte Lichtkarte kann mit einem Texturbild unter Verwendung des Multiplikationsterms des arithmetic-Operators des <feComposite>-Filterprimitives kombiniert werden. Mehrere Lichtquellen können simuliert werden, indem mehrere dieser Lichtkarten miteinander addiert werden, bevor sie auf das Texturbild angewendet werden.

Wie andere Filterprimitives verarbeitet es Farbkomponenten standardmäßig im linearRGB-Farbraum. Sie können color-interpolation-filters verwenden, um anstelle dessen sRGB zu benutzen.

Verwendungskontext

KategorienPrimitives Filterelement
Erlaubter InhaltAny number of descriptive elements and exactly one light source element, in any order.

Attribute

DOM-Schnittstelle

Dieses Element implementiert die SVGFEDiffuseLightingElement-Schnittstelle.

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.

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

Erwartete Darstellung:

Erwartete Darstellung für das Beispiel

Live-Darstellung:

Spezifikationen

Specification
Filter Effects Module Level 1
# feDiffuseLightingElement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch