Javascript 有没有一种简单的方法来清除 SVG 元素的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3674265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there an easy way to clear an SVG element's contents?
提问by Aseem Kishore
In HTML, I can clear a <div>element with this command:
在 HTML 中，我可以<div>使用以下命令清除元素：
div.innerHTML = "";
Is there an equivalent if I have an <svg>element? I can't find an innerHTMLnor innerXMLor even innerSVGmethod.
如果我有一个<svg>元素，是否有等价物？我找不到innerHTML也innerXML或什至innerSVG方法。
I know the SVG DOM is a superset of the XML DOM, so I know I can do something like this:
我知道 SVG DOM 是 XML DOM 的超集，所以我知道我可以这样做：
while (svg.lastChild) {
svg.removeChild(svg.lastChild);
}
But this is both tedious and slow. Is there a faster or easier way to clear an SVG element?
但这既乏味又缓慢。有没有更快或更简单的方法来清除 SVG 元素？
采纳答案by Volker
You already gave one answer: you can always just loop over all children and remove them. If you think that you have too many child nodes then maybe you want to replace the svg node by an empty one. If your svg node has some attributes you may use a tag where you place all the child nodes and then just replace the node with an empty one.
您已经给出了一个答案：您始终可以循环遍历所有子项并将其删除。如果您认为您有太多子节点，那么您可能想用一个空节点替换 svg 节点。如果你的 svg 节点有一些属性，你可以使用一个标签来放置所有的子节点，然后用一个空的节点替换节点。
回答by FrancesKR
If you're using jQuery, you can just do
如果你使用 jQuery，你可以这样做
$("#svgid").empty();
This deletes all child elementsof the svg while leaving its other attributes like width and height intact.
回答by Praveen Prasannan
Use d3.js. This will remove all contents nodes from svg.
使用 d3.js。这将从 svg 中删除所有内容节点。
svg.selectAll("*").remove();
回答by cuixiping
I agree to use the clone and replace the element with the cloned one.
我同意使用克隆并用克隆的元素替换元素。
Only one line code:
只有一行代码：
svg.parentNode.replaceChild(svg.cloneNode(false), svg);
回答by Calvin Li
I've tried svg.text("")and it seems to work. Clears out all the inner text, keeps the attributes.
我试过了svg.text("")，它似乎有效。清除所有内部文本，保留属性。
回答by Yaron Shamir
You can use the clone and replace the element with the cloned one.
您可以使用克隆并将元素替换为克隆的元素。
var parentElement = svg.parentElement
var emptySvg = svg.cloneNode(false);
parentElement.removeChild(svg);
parentElement.appendChild(emptySvg);
This will append the svg at the end, you might want to get the element before and append accordinaly
这将在最后追加 svg，您可能想要在之前获取元素并根据需要追加
回答by Travis
element = document.getElementById("elementID");
element.parentNode.removeChild(element);
I got the idea from http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/
我从http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/得到了这个想法
回答by Moin Zaman
use this? http://keith-wood.name/svg.html
用这个？http://keith-wood.name/svg.html
there's also raphael: jQuery SVG vs. Raphael
还有 raphael：jQuery SVG vs. Raphael
I'd be tempted to trawl through and see who they're doing their .destroy()methods.
我很想通过拖网来看看他们在做什么他们的.destroy()方法。
