SVGFESpotLightElement: pointsAtZ 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 pointsAtZ của giao diện SVGFESpotLightElement phản ánh thuộc tính pointsAtZ của phần tử <feSpotLight> đã cho.

Trong ví dụ này, chúng ta truy cập vị trí z của nguồn sáng được tạo bởi phần tử SVG filter <feSpotLight> trong hệ tọa độ SVG bằng cách sử dụng thuộc tính chỉ đọc pointsAtZ 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.pointsAtZ.baseVal); // Output: 0