如何在 SVG 元素中使用 z-index？

在 HTML 中，我们可以使用 CSS 的 z-index 属性来控制元素的层叠顺序。那么在 SVG 中，又该如何使用 z-index 呢？本文将会进行介绍。

SVG 元素的渲染顺序

在 SVG 中，每个元素都有一个默认的渲染顺序。这个渲染顺序是根据元素在 SVG 中的声明顺序决定的。也就是说，越靠后声明的元素会被渲染在越前面，从而覆盖掉前面的元素。

例子：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" fill="red"/>
  <circle cx="50" cy="50" r="30" fill="blue"/>
</svg>

在上面的例子中，矩形是在圆形之前声明的，因此矩形会被渲染在圆形之前，从而盖住了圆形。

使用 CSS 属性进行控制

和 HTML 中类似，SVG 中也可以使用 CSS 属性来控制元素的层叠顺序。不过需要注意的是，SVG 中只有少量的 CSS 属性可以用来控制元素的层叠顺序。这些属性包括：opacity、fill-opacity、stroke-opacity、stop-opacity。也就是说，只有这些属性的值不同时，才会影响元素的层叠顺序。

例子：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" fill="red" style="opacity: 0.5;"/>
  <circle cx="50" cy="50" r="30" fill="blue" style="opacity: 0.7;"/>
</svg>

在上面的例子中，圆形的不透明度（opacity）更高，因此它会被渲染在矩形的上面，与前面的例子不同。

使用 元素进行控制

除了使用 CSS 属性外，还可以使用 <use> 元素来控制元素的层叠顺序。在 SVG 中， <use> 元素可以将一个元素的副本插入到文档中的任何位置。因此，我们可以使用 <use> 元素来控制元素的渲染顺序。

例子：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <rect id="my-rect" x="10" y="10" width="80" height="80" fill="red"/>
  </defs>
  <g>
    <use xlink:href="#my-rect" style="opacity: 0.5;"/>
    <use xlink:href="#my-rect" style="opacity: 0.7;"/>
  </g>
</svg>

在上面的例子中，使用 <use> 元素将矩形分别插入到了 <g> 元素中，并分别设置了不同的不透明度。由于 <g> 元素中第二个 <use> 元素声明在第一个 <use> 元素之后，因此它会被渲染在第一个元素的上面，与前面两个例子不同。

总结

在 SVG 中，元素的层叠顺序是由元素声明的顺序决定的。除了使用 CSS 属性外，还可以使用 <use> 元素来控制元素的渲染顺序。需要注意的是，只有 <use> 元素中的元素声明在前面的元素之后，才会被渲染在前面的元素之上。