我在我的项目中使用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索引来显示第一个元素。在我的项目中，我只需要使用z-index值，但我不能使用我的svg元素的z-index。我在谷歌上搜了很多，但没有找到相关的东西。 所以请帮助我在我的svg中使用z-index。
这里是DEMO。
当前回答
试着颠倒# 1和# 2。看看这个小提琴:http://jsfiddle.net/hu2pk/3/
更新
在SVG中，z-index由元素在文档中出现的顺序定义。如果你愿意，你也可以看看这个页面:https://stackoverflow.com/a/482147/1932751
其他回答
试着颠倒# 1和# 2。看看这个小提琴:http://jsfiddle.net/hu2pk/3/
更新
在SVG中，z-index由元素在文档中出现的顺序定义。如果你愿意，你也可以看看这个页面:https://stackoverflow.com/a/482147/1932751
通过transform:TranslateZ移动到前面
警告:仅适用于FireFox
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" style="width:160px;身高:160 px;" > <g style=" font - family:宋体;"> <g id="one" style=" font - family:宋体;"> <circle fill="green" cx="100" cy="105" r="20" style="transform:TranslateZ(1px);" > < /圆> < / g > <g id="two" style=" font - family:宋体;"> <圆填充= "橙色"残雪= " 100 " cy = " 95 " r = " 20 " > < /圆> < / g > < / g > < / svg >
规范
在SVG规范1.1版本中，呈现顺序是基于文档顺序的:
first element -> "painted" first
参考SVG 1.1。规范
3.3渲染顺序 SVG文档片段中的元素有一个隐式的绘制顺序，SVG文档片段中的第一个元素首先“绘制”。后续的元素被绘制在先前绘制的元素之上。
解决方案(cleaner-faster)
你应该把绿色的圆圈作为最近要绘制的对象。交换这两个元素。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120"> <！首先画一个橙色的圆——> <circle fill="orange" cx="100" cy="95" r="20"/> <！——然后在当前画布上绘制绿色圆圈——> <圆填充="绿色" cx="100" cy="105" r="20"/> < / svg >
这里是jsFiddle的fork。
解决方案(选择)
该标记与属性xlink:href(对于SVG 2只是href)一起使用，并将元素的id作为值。请记住，这可能不是最好的解决方案，即使结果看起来很好。有一点时间，这里是规范SVG 1.1“use”元素的链接。
目的: 避免要求作者修改所引用的文档以向根元素添加ID。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120"> <！——首先画一个绿色的圆——> <圆id =“1”填补=“绿色”残雪= " 100 " cy = " 105 " r = " 20 " / > <！——然后在当前画布上绘制橙色圆圈——> <圆id = "两个“填补=“橙色cx”=“100”cy = " 95 " r = " 20 " / > <！——最后在当前画布上再次绘制绿色圆圈——> <使用xlink: href = " # 1 " / > < / svg >
关于SVG 2的说明
SVG 2规范是下一个主要版本，仍然支持上述特性。
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支持Mozilla -绘画 我如何知道我的浏览器是否支持svg 2.0 我可以使用SVG吗? 对于SVG 2，使用href代替额外的已弃用名称空间XLink:href(感谢G07cha)
一个更好的例子，我已经用过了。
<svg>
<defs>
<circle id="one" fill="green" cx="40" cy="40" r="20" />
<circle id="two" fill="orange" cx="50" cy="40" r="20"/>
</defs>
<use href="#two" />
<use href="#one" />
</svg>
为了控制顺序，你可以改变这些use元素的href属性值。这对动画制作很有用。
多亏了defs，圆圈元素只绘制一次。
jsfiddle.net/7msv2w5d
将SVG元素推到最后，这样它的z索引就会在上面。在SVG中，没有称为z-index的属性。尝试下面的javascript把元素放在顶部。
var Target = document.getElementById(event.currentTarget.id);
var svg = document.getElementById("SVGEditor");
svg.insertBefore(Target, svg.lastChild.nextSibling);
目标:是一个我们需要把它放在顶部的元素 是元素的容器
