z

z 属性定义了在 <filter> 元素上由 primitiveUnits 属性建立的坐标系中,光源沿 z 轴的位置。假设在初始坐标系中,正 z 轴朝向观察者,并且 z 轴上的一个单位等于 x 和 y 轴上的一个单位。

元素

你可以在下面部分描述的 SVG 元素中使用此属性。

<fePointLight>

对于 <fePointLight>z 定义了在 <filter> 元素上由 primitiveUnits 属性建立的坐标系中,光源沿 z 轴的位置。

<number>
默认值 1
可动画的

<feSpotLight>

对于 <feSpotLight>z 定义了在 <filter> 元素上由 primitiveUnits 属性建立的坐标系中,光源沿 z 轴的位置。

<number>
默认值 1
可动画的

示例

html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="diffuseLighting1" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic">
      <fePointLight x="60" y="60" z="10" />
    </feDiffuseLighting>
  </filter>
  <filter id="diffuseLighting2" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic">
      <fePointLight x="340" y="60" z="50" />
    </feDiffuseLighting>
  </filter>

  <rect x="0" y="0" width="200" height="200" filter="url(#diffuseLighting1)" />
  <rect
    x="200"
    y="0"
    width="200"
    height="200"
    filter="url(#diffuseLighting2)" />
</svg>

规范

规范
滤镜效果模块第 1 级
# element-attrdef-fepointlight-z
滤镜效果模块第 1 级
# element-attrdef-fespotlight-z