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

Question

我在我的项目中像这样使用 svg 圆圈，

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
    <g>
        <g id="one">
            <circle fill="green" cx="100" cy="105" r="20" />
        </g>
        <g id="two">
            <circle fill="orange" cx="100" cy="95" r="20" />
        </g>
    </g>
</svg>

我在 g 标签中使用 z-index 来首先显示元素。在我的项目中，我只需要使用 z-index 值，但我不能将 z-index 用于我的 svg 元素。我用谷歌搜索了很多，但我没有找到任何相关的东西。所以请帮我在我的 svg 中使用 z-index。

这是 DEMO.

Answer 1

规范

在 SVG 规范 1.1 版中，渲染顺序基于文档顺序:

first element -> "painted" first

引用 SVG 1.1. Specification

3.3 Rendering Order

Elements in an SVG document fragment have an implicit drawing order, with the first elements in the SVG document fragment getting "painted" first. Subsequent elements are painted on top of previously painted elements.

---

解决方案(清洁更快)

你应该把绿色圆圈作为最新绘制的对象。所以交换这两个元素。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120"> 
   <!-- First draw the orange circle -->
   <circle fill="orange" cx="100" cy="95" r="20"/> 

   <!-- Then draw the green circle over the current canvas -->
   <circle fill="green" cx="100" cy="105" r="20"/> 
</svg>

这是你的 jsFiddle 的 fork .

解决方案(备选)

标签 use 带有属性 xlink:href (对于 SVG 2 只是 href )和元素的 id 作为值。请记住，即使结果看起来不错，这也可能不是最佳解决方案。有点时间，这里是规范的链接 SVG 1.1 "use" Element .

Purpose:

To avoid requiring authors to modify the referenced document to add an ID to the root element.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120">
    <!-- First draw the green circle -->
    <circle id="one" fill="green" cx="100" cy="105" r="20" />
    
    <!-- Then draw the orange circle over the current canvas -->
    <circle id="two" fill="orange" cx="100" cy="95" r="20" />
    
    <!-- Finally draw again the green circle over the current canvas -->
    <use xlink:href="#one"/>
</svg>

---

SVG 2 注释

SVG 2 Specification是下一个主要版本，仍然支持上述功能。

3.4. Rendering order

Elements in SVG are positioned in three dimensions. In addition to their position on the x and y axis of the SVG viewport, SVG elements are also positioned on the z axis. The position on the z-axis defines the order that they are painted.

Along the z axis, elements are grouped into stacking contexts.

3.4.1. Establishing a stacking context in SVG

...

Stacking contexts are conceptual tools used to describe the order in which elements must be painted one on top of the other when the document is rendered, ...

• SVG 2 Support Mozilla - Painting
• How do I know if my browser supports svg 2.0
• Can I use SVG
• Deprecated XLink namespace对于 SVG 2，使用 href 而不是额外的弃用命名空间 xlink:href(感谢 G07cha)