SVG FESpotLightElement.z 属性介绍

SVG FESpotLightElement 是一种用于在 SVG 中实现动态光照效果的元素。FESpotLightElement.z 属性用于控制光源位置的 z 坐标值。

语法

FESpotLightElement.z 属性的语法如下：

<feSpotLight z="value" />

其中，value 的取值范围为 [-3, 3]。

作用

FESpotLightElement.z 属性用于控制 FESpotLightElement 的 z 坐标值，从而改变其在三维坐标系中的位置。z 坐标值越大，元素距离观察者越远，投影越小；z 坐标值越小，元素距离观察者越近，投影越大。可以通过调整 z 坐标值，实现光源位置的变化以及不同的光照效果。

示例

以下示例中，展示了通过改变 FESpotLightElement.z 属性值，实现不同光源位置的效果变化。

<svg>
  <defs>
    <filter id="spotlight">
      <feGaussianBlur stdDeviation="2"/>
      <feOffset dx="-3" dy="-3" result="offsetblur"/>
      <feFlood flood-color="rgba(255,255,255,0.2)"/>
      <feComposite in2="offsetblur" operator="in"/>
      <feComposite in2="SourceAlpha" operator="in" />
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <circle cx="100" cy="100" r="50" fill="blue" filter="url(#spotlight)">
    <animate attributeName="filter" dur="4s" values="
      url(#spotlight);
      url(#spotlight) feSpotLight {x:200,y:100,z:3};
      url(#spotlight) feSpotLight {x:300,y:200,z:-3};
      url(#spotlight) feSpotLight {x:150,y:80,z:0};
      url(#spotlight)"/>
  </circle>
</svg>

在上述示例中，通过动画来改变 FESpotLightElement.z 属性值，实现了呼吸灯效果的光照效果。

注意事项

• FESpotLightElement.z 属性值必须在 [-3, 3] 的范围内取值。
• 改变 FESpotLightElement.z 属性值时，最好同时改变其它光源参数，如 x 和 y 坐标值，从而实现更自然的光照效果。
• FESpotLightElement 只在一些支持 SVG filter 的浏览器中有效，如 Chrome 和 Firefox。