调整 SVG z-index 元素层级

在 SVG 的规范中，<svg> 内的元素层级由它们的排列顺序决定，后面的覆盖前面的

例如

我们在 <svg> 元素内画两个圆，先画橙色，再画蓝色

            <svg viewBox="0 0 15 10" xmlns="http://www.w3.org/2000/svg">
                <!-- 橙色 -->
                <circle fill="orange" cx="5" cy="5" r="5"/>
                <!-- 蓝色 -->
                <circle fill="blue" cx="10" cy="5" r="5"/>
             </svg>
        

如下所示，蓝色层级更高

想要修改它们的 z-index ，只需要更换它们的位置，例如：

            <svg viewBox="0 0 15 10" xmlns="http://www.w3.org/2000/svg">
                <!-- 蓝色 -->
                <circle fill="blue" cx="10" cy="5" r="5"/>
                <!-- 橙色 -->
                <circle fill="orange" cx="5" cy="5" r="5"/>
             </svg>
        

此时橙色在上，覆盖了蓝色

另一种方式

也可以通过使用 <use> 元素来达到相同的效果

            <svg viewBox="0 0 15 10" xmlns="http://www.w3.org/2000/svg">
                <!-- 橙色 设置id为"c1"-->
                <circle id="c1" fill="orange" cx="5" cy="5" r="5"/>
                <!-- 蓝色 -->
                <circle fill="blue" cx="10" cy="5" r="5"/>
                <!-- 使用 use -->
                <use href="#c1"/>
             </svg>
        

它的原理是复制 id 为 "c1" 的元素到当前 <use> 元素的位置，它在蓝色的后面，所以层级更高

结果如下：