我在我的项目中使用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。


当前回答

一个更好的例子,我已经用过了。

<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

其他回答

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

我们已经到了2019年,SVG仍然不支持z-index。

您可以在Mozilla的SVG2支持站点上看到z-index的状态-未实现。

你也可以在网站Bug 360148“支持SVG元素上的'z-index'属性”(报告:12年前)上看到。

但在SVG中有3种设置方法:

与element.appendChild(孩子); parentNode。方法(newNode referenceNode); targetElement。insertAdjacentElement (positionStr newElement);(IE不支持SVG)

交互式演示示例

这三个函数。

var state = 0, index = 100; document.onclick = function(e) { if(e.target.getAttribute('class') == 'clickable') { var parent = e.target.parentNode; if(state == 0) parent.appendChild(e.target); else if(state == 1) parent.insertBefore(e.target, null); //null - adds it on the end else if(state == 2) parent.insertAdjacentElement('beforeend', e.target); else e.target.style.zIndex = index++; } }; if(!document.querySelector('svg').insertAdjacentElement) { var label = document.querySelectorAll('label')[2]; label.setAttribute('disabled','disabled'); label.style.color = '#aaa'; label.style.background = '#eee'; label.style.cursor = 'not-allowed'; label.title = 'This function is not supported in SVG for your browser.'; } label{background:#cef;padding:5px;cursor:pointer} .clickable{cursor:pointer} With: <label><input type="radio" name="check" onclick="state=0" checked/>appendChild()</label> <label><input type="radio" name="check" onclick="state=1"/>insertBefore()</label><br><br> <label><input type="radio" name="check" onclick="state=2"/>insertAdjacentElement()</label> <label><input type="radio" name="check" onclick="state=3"/>Try it with z-index</label> <br> <svg width="150" height="150" viewBox="0 0 150 150"> <g stroke="none"> <rect id="i1" class="clickable" x="10" y="10" width="50" height="50" fill="#80f"/> <rect id="i2" class="clickable" x="40" y="40" width="50" height="50" fill="#8f0"/> <rect id="i3" class="clickable" x="70" y="70" width="50" height="50" fill="#08f"/> </g> </svg>

另一种解决方案是使用div,它使用zIndex来包含SVG元素。在这里: https://stackoverflow.com/a/28904640/4552494

Use可以达到这个目的,但是那些被放置在Use help之后的元素很难操作…… 在我使用它之后,我不明白的是:为什么我不能在use元素上悬停(无论是鼠标悬停,鼠标进入操作都不能工作)来获得额外的功能-比如~在圆圈上显示文本~ 之后返回到圆圈重新排序,因为这是操作svg对象的唯一方式

试着颠倒# 1和# 2。看看这个小提琴:http://jsfiddle.net/hu2pk/3/

更新

在SVG中,z-index由元素在文档中出现的顺序定义。如果你愿意,你也可以看看这个页面:https://stackoverflow.com/a/482147/1932751