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的这个deletes all child elements，同时保留宽度和高度等其他属性。

Answer 2

您已经给出了一个答案：您可以随时循环遍历所有孩子并将其删除。如果您认为您有太多子节点，那么您可能希望用空的节点替换svg节点。如果你的svg节点有一些属性，你可以使用一个标签来放置所有的子节点，然后用空的节点替换它。

Answer 3

使用d3.js.这将从svg。

中删除所有内容节点

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

Answer 4

您可以使用克隆并将该元素替换为克隆的元素。

    var parentElement = svg.parentElement
    var emptySvg = svg.cloneNode(false);
    parentElement.removeChild(svg);
    parentElement.appendChild(emptySvg);

这会将svg追加到最后，你可能想要之前得到这个元素并附加方式

Answer 5

用这个？ http://keith-wood.name/svg.html

还有raphael：jQuery SVG vs. Raphael

我很想去搜寻他们正在做.destroy()方法的人。

Answer 6

element = document.getElementById("elementID");
element.parentNode.removeChild(element);

我从http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/

得到了这个想法

Answer 7

我已经尝试了svg.text("")，它似乎有效。清除所有内部文本，保留属性。

Answer 8

如果您想保留我的svg的定义，请使用

function clear(prnt){
    let children = prnt.children;
    for (let i=0;i<children.length;){
        let el = children[i];
        if (el.tagName!=='defs'){
            el.remove();
        }else(i++);
    }
}

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

8 个答案: