SVGFESpotLightElement: limitingConeAngle-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die limitingConeAngle schreibgeschützte Eigenschaft der SVGFESpotLightElement-Schnittstelle spiegelt das limitingConeAngle-Attribut des gegebenen <feSpotLight>-Elements wider.

In diesem Beispiel greifen wir auf den Winkel in Grad zwischen der Achse des Spotlights (d.h. der Achse zwischen der Lichtquelle und dem Punkt, zu dem es zeigt) und dem Lichtkegel des Spotlights zu, indem wir die schreibgeschützte limitingConeAngle-Eigenschaft der SVGFESpotLightElement-Schnittstelle verwenden.

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="specularLightingFilter">
      <!-- Apply a specular light effect to the SourceGraphic -->
      <feSpecularLighting
        in="SourceGraphic"
        specularExponent="40"
        lighting-color="lime"
        surfaceScale="5">
        <feSpotLight
          x="100"
          y="100"
          z="50"
          pointsAtX="100"
          pointsAtY="100"
          limitingConeAngle="30"
          specularExponent="40" />
      </feSpecularLighting>
    </filter>
  </defs>

  <!-- A circle to display the effect of the lighting -->
  <circle
    cx="100"
    cy="100"
    r="50"
    fill="lightblue"
    filter="url(#specularLightingFilter)" />
</svg>

// Select the feSpotLight element
const spotLightElement = document.querySelector("feSpotLight");

// Access the limitingConeAngle property
console.log(spotLightElement.limitingConeAngle.baseVal); // Output: 30