SVGFESpotLightElement: pointsAtY-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 pointsAtY schreibgeschützte Eigenschaft der Schnittstelle SVGFESpotLightElement spiegelt das pointsAtY Attribut des gegebenen <feSpotLight> Elements wider.

In diesem Beispiel greifen wir auf die y-Position des <feSpotLight>-Elements im SVG-Koordinatensystem zu, indem wir die schreibgeschützte Eigenschaft pointsAtY der Schnittstelle SVGFESpotLightElement 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="20"
        lighting-color="hotpink"
        surfaceScale="30">
        <feSpotLight
          x="10"
          y="50"
          z="150"
          pointsAtX="150"
          pointsAtY="100"
          pointsAtZ="0"
          specularExponent="20" />
      </feSpecularLighting>
    </filter>
  </defs>

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

// Select the feSpotLight element
const spotLightElement = document.querySelector("feSpotLight");
console.log(spotLightElement.pointsAtY.baseVal); // Output: 100