调整 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> 元素的位置,它在蓝色的后面,所以层级更高

结果如下:


back home