如何在 svg 元素中使用 z-index? [英] How to use z-index in svg elements?

问题描述

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

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

这是演示.

解决方案

规范

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

第一个元素 ->画"第一的

参考 SVG 1.1.规格

<块引用>

3.3 渲染顺序

SVG 文档片段中的元素具有隐式绘制顺序，SVG 文档片段中的第一个元素被绘制".首先.后续元素绘制在先前绘制的元素之上.

---

解决方案(更干净-更快)

您应该将绿色圆圈作为要绘制的最新对象.所以交换两个元素.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120"><!-- 先画橙色圆圈--><circle fill="orange" cx="100" cy="95" r="20"/><!-- 然后在当前画布上绘制绿色圆圈--><circle fill="green" cx="100" cy="105" r="20"/></svg>

这里是 jsFiddle 的分支.

解决方案(替代)

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

<块引用>

目的:

为了避免要求作者修改引用的文档以将 ID 添加到根元素.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120"><!-- 先画绿色圆圈--><circle id="one" fill="green" cx="100" cy="105" r="20"/><!-- 然后在当前画布上绘制橙色圆圈--><circle id="two" fill="orange" cx="100" cy="95" r="20"/><!-- 最后在当前画布上再次绘制绿色圆圈--><使用 xlink:href="#one"/></svg>

---

SVG 2 的注意事项

SVG 2 规范是下一个主要版本，仍然支持上述功能.><块引用>

3.4.渲染顺序

SVG 中的元素在三个维度上定位.除了它们在 SVG 视口的 x 和 y 轴上的位置之外，SVG 元素还位于 z 轴上.z 轴上的位置定义了它们的绘制顺序.

沿着 z 轴，元素被分组到堆叠上下文中.

3.4.1.在 SVG 中建立堆叠上下文

...

堆叠上下文是概念性工具，用于描述渲染文档时元素必须在另一个之上绘制的顺序，...

• SVG 2 支持 Mozilla - 绘画莉>
• 如何知道我的浏览器支持 svg 2.0
• 我可以使用 SVG 吗
• 已弃用的 XLink 命名空间 对于 SVG 2 使用 href 而不是额外的弃用命名空间 xlink:href(感谢 G07cha)

I'm using the svg circles in my project like this,

<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>

And I'm using the z-index in the g tag to show the elements the first. In my project I need to use only z-index value, but I can't use the z-index to my svg elements. I have googled a lot but I didn't find anything relatively. So please help me to use z-index in my svg.

Here is the DEMO.

解决方案

Specification

In the SVG specification version 1.1 the rendering order is based on the document order:

first element -> "painted" first

Reference to the 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.

---

Solution (cleaner-faster)

You should put the green circle as the latest object to be drawn. So swap the two 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>

Here the fork of your jsFiddle.

Solution (alternative)

The tag use with the attribute xlink:href (just href for SVG 2) and as value the id of the element. Keep in mind that might not be the best solution even if the result seems fine. Having a bit of time, here the link of the specification 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>

---

Notes on SVG 2

SVG 2 Specification is the next major release and still supports the above features.

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 For SVG 2 use href instead of the additional deprecated namespace xlink:href (Thanks G07cha)

这篇关于如何在 svg 元素中使用 z-index?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！