limitingConeAngle

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 limitingConeAngle-Attribut repräsentiert den Winkel in Grad zwischen der Achse des Spot-Lichts (d.h. der Achse zwischen der Lichtquelle und dem Punkt, auf den sie zeigt) und dem Kegel des Spot-Lichts. Es definiert somit einen Begrenzungskegel, der den Bereich einschränkt, in dem das Licht projiziert wird. Außerhalb des Kegels wird kein Licht projiziert.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

html
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="spotLight1" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting diffuseConstant="2">
      <feSpotLight
        x="10"
        y="10"
        z="50"
        pointsAtX="100"
        pointsAtY="100"
        limitingConeAngle="10" />
    </feDiffuseLighting>
  </filter>
  <filter id="spotLight2" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting diffuseConstant="2">
      <feSpotLight
        x="10"
        y="10"
        z="50"
        pointsAtX="100"
        pointsAtY="100"
        limitingConeAngle="40" />
    </feDiffuseLighting>
  </filter>

  <rect
    x="0"
    y="0"
    width="200"
    height="200"
    style="filter: url(#spotLight1);" />
  <rect
    x="0"
    y="0"
    width="200"
    height="200"
    style="filter: url(#spotLight2); transform: translateX(220px);" />
</svg>

Anwendungshinweise

Wert <number>
Standardwert 0
Animierbar Ja

Spezifikationen

Specification
Filter Effects Module Level 1
# element-attrdef-fespotlight-limitingconeangle

Browser-Kompatibilität