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

Trong ví dụ này, chúng ta truy cập góc tính bằng độ giữa trục đèn spotlight (tức là trục giữa nguồn sáng và điểm mà nó chiếu vào) và nón đèn spotlight, bằng cách sử dụng thuộc tính chỉ đọc limitingConeAngle 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="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