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

Der <feDiffuseLighting> SVG Filter-Primitiv beleuchtet ein Bild, indem er den Alpha-Kanal als Bump-Map verwendet. Das resultierende Bild, welches ein undurchsichtiges RGBA-Bild ist, hängt von der Lichtfarbe, der Lichtposition und der Oberflächengeometrie der Eingabe-Bump-Map ab.

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

Verwendungszusammenhang

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

Attribute

DOM-Interface

Dieses Element implementiert das SVGFEDiffuseLightingElement Interface.

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>

Erwartetes Rendering:

Erwartetes Rendering für das Beispiel

Live-Rendering:

Spezifikationen

Specification
Filter Effects Module Level 1
# feDiffuseLightingElement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch