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

问题描述

我在我的项目中使用svg圈子，

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>

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

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.

这是 DEMO。

推荐答案

规格

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

Specification

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

first element -> "painted" first

参考规范： SVG 1.1渲染订单

3.3渲染顺序

3.3 Rendering Order

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

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.

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

标签使用，其属性为 xlink：href 并作为值元素的id。请记住，即使结果看起来不错，也可能不是最佳解决方案。有一点时间，这里的规范 SVG 1.1的链接使用元素。

The tag use with the attribute xlink:href 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:

为避免要求作者修改引用文档以向根元素添加ID。

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是标准的下一个版本 https://www.w3.org/TR/SVG2/ 。

SVG 2 is the next version of the standard https://www.w3.org/TR/SVG2/.

3.4渲染订单

SVG中的元素以三维方式定位。除了它们在SVG视口的x和y轴上的位置之外，SVG元素也位于z轴上。 z轴上的位置定义了它们的绘制顺序。

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.

...

3.4.1。控制元素呈现顺序：'z-index'属性

...

• SVG 2支持Mozilla - 绘画


• 我怎么知道我的浏览器是否支持svg 2.0


• 我可以使用SVG


• SVG 2风险特征


• SVG 2 Support Mozilla - Painting
• How do I know if my browser supports svg 2.0
• Can I use SVG
• Feature at risk for the SVG 2

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