SVG z 属性

SVG（可缩放矢量图形）z 属性用于定义 SVG 元素相对于其他元素的堆叠顺序。

z 属性可以在任何具有位置属性的 SVG 元素中指定。

语法

<element z="number|auto" />

其中，z 属性值是 number 或 auto（默认值为 auto）。

属性值

• number：定义 SVG 元素的 z-index，数字越大，层级越高。
• auto：指定 SVG 元素应该接受由 CSS 定义的 z-index 值。

示例

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="30" height="30" fill="#f00" z="2" />
  <rect x="20" y="20" width="30" height="30" fill="#0f0" />
  <rect x="30" y="30" width="30" height="30" fill="#00f" z="1" />
</svg>

上述示例代码中，第一个矩形（红色矩形）的 z 属性为 2，第三个矩形（蓝色矩形）的 z 属性为 1。因此，红色矩形在蓝色矩形的上层，而绿色矩形的 z 属性为默认的 auto，即不受 CSS z-index 的影响，因此在最底层。

注意事项

• 使用 z 属性时，需要为 SVG 元素设置 position 属性，否则 z 属性不会生效。
• 与 CSS 不同，SVG 的 z 属性并不是一个数字越大就在上层的模式，因为 SVG 可以进行透明度、滤镜等属性操作，因此，要将 SVG 元素按正确的层级放置，需要根据实际需求进行调整。