<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>
<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>
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，您需要将项目从其父节点中取出。
function bringToTopofSVG(targetElement){
let parent = targetElement.ownerSVGElement;
parent.appendChild(targetElement);
}
SVG 的一个很好的特性是每个元素都包含它的位置，而不管它嵌套在哪个组中:+1:
【讨论】：
嗨，这对我有用，但是“降到最低”的等价物是什么？谢谢
@gavin SVG 元素按从上到下的顺序绘制。要将元素放在顶部，我们 append() 它使其成为最后一个元素。相反，如果我们想要将一个元素发送到底部，我们通过 prepend() 将其放置为第一个元素。 function bringToBottomofSVG(targetElement){ let parent = targetElement.ownerSVGElement; parent.prepend(targetElement); }
只有当组没有转换属性时才适用：“..每个元素都包含它的位置，无论它嵌套在哪个组中”
【解决方案6】：
使用 D3：
如果您想按顺序重新插入每个选定元素，作为其父元素的最后一个子元素。
selection.raise()
【讨论】：
selection.raise() 在 D3 v4 中是新的。
【解决方案7】：
svg 没有 z-index。但是 svg 通过它们在 DOM 中的位置来确定哪些元素是最上面的。因此，您可以删除对象并将其放置到 svg 的末尾，使其成为“最后渲染”的元素。然后将那个在视觉上呈现为“最顶层”。
使用 jQuery：
function moveUp(thisObject){
thisObject.appendTo(thisObject.parents('svg>g'));
}
var Target = document.getElementById(event.currentTarget.id);
var svg = document.getElementById("SVGEditor");
svg.insertBefore(Target, svg.lastChild.nextSibling);