有没有简单的方法来清除SVG元素的内容？

Question

在HTML中,我可以<div>使用此命令清除元素:

div.innerHTML = "";

如果我有<svg>元素,是否有等价物？我找不到一个innerHTML也不innerXML是甚至innerSVG方法.

我知道SVG DOM是XML DOM的超集,所以我知道我可以这样做:

while (svg.lastChild) {
    svg.removeChild(svg.lastChild);
}

但这既乏味又缓慢.是否有更快或更简单的方法来清除SVG元素？

Answer 1

如果您正在使用jQuery,那么您可以这样做

$("#svgid").empty();

这会删除 svg的所有子元素,同时保留宽度和高度等其他属性.

Answer 2

你已经给出了一个答案:你总是可以循环遍历所有孩子并将其删除.如果您认为您有太多子节点,那么您可能希望用空的节点替换svg节点.如果您的svg节点具有某些属性,则可以使用标记放置所有子节点,然后只用空节点替换该节点.

Answer 3

使用d3.js. 这将从svg中删除所有内容节点.

svg.selectAll("*").remove();

Answer 4

我同意使用克隆并用克隆的元素替换元素.

只有一行代码:

svg.parentNode.replaceChild(svg.cloneNode(false), svg);