如何在svg元素中使用z-index？
如何在svg元素中使用z-index？
提问于 2013-07-22 19:38:29
我在我的项目中使用了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索引值，但是我不能对我的svg元素使用z索引。我在谷歌上搜索了很多，但我没有找到任何相关的东西。所以请帮助我在svg中使用z-index。
这是DEMO.
回答 7
Stack Overflow用户
发布于 2017-11-15 11:25:19
如前所述，svgs按顺序呈现，并且(目前)不考虑z-index。也许只是将特定的元素发送到它的父元素的底部，这样它就会呈现在最后。
function bringToTop(targetElement){
// put the element at the bottom of its parent
let parent = targetElement.parentNode;
parent.appendChild(targetElement);
}
// then just pass through the element you wish to bring to the top
bringToTop(document.getElementById("one"));对我很管用。
更新
如果您有一个包含组的嵌套SVG，则需要将项从其parentNode中取出。
function bringToTopofSVG(targetElement){
let parent = targetElement.ownerSVGElement;
parent.appendChild(targetElement);
}SVG的一个很好的特性是，无论它嵌套在：+1中的组是什么，每个元素都包含它的位置：
Stack Overflow用户
发布于 2017-11-14 20:47:46
使用D3：
如果要重新插入每个选定元素，请按顺序将其作为其父元素的最后一个子项插入。
selection.raise()Stack Overflow用户
发布于 2016-04-22 19:29:19
使用D3：
如果要以相反的顺序将元素添加到数据中，请使用：
.insert('g', ":first-child")代替.append
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17786618
复制相关文章
相似问题
腾讯云开发者
