SVGFESpotLightElement: pointsAtY property

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.

Thuộc tính chỉ đọc pointsAtY của giao diện SVGFESpotLightElement phản ánh thuộc tính pointsAtY của phần tử <feSpotLight> đã cho.

Giá trị

Một đối tượng SVGAnimatedNumber.

Ví dụ

Truy cập thuộc tính `pointsAtY` của phần tử `<feSpotLight>`

Trong ví dụ này, chúng ta truy cập vị trí y của phần tử <feSpotLight> trong hệ tọa độ SVG bằng cách sử dụng thuộc tính chỉ đọc pointsAtY của giao diện SVGFESpotLightElement.

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