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

Posted 2023-02-22

【中文标题】有没有一种简单的方法来清除 SVG 元素的内容？

【英文标题】：Is there an easy way to clear an SVG element's contents?

【发布时间】：2011-04-10 02:39:19

【问题描述】：

在 html 中，我可以使用以下命令清除 <div> 元素：

div.innerHTML = "";

如果我有 <svg> 元素，是否有等价物？我找不到innerHTML 或innerXML 甚至innerSVG 方法。

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

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

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

【参考方案1】：

如果你使用 jQuery，你可以这样做

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

这个 svg 的deletes all child elements，同时保持其宽度和高度等其他属性不变。

【讨论】：

这正是我想要的。

移除 标签 :(

扩展 john ktejik 的 commnet。使用 empty() 清除所有定义。使用循环只会清除那些与已移除子元素相关的定义。

【参考方案2】：

您已经给出了一个答案：您始终可以遍历所有子节点并将其删除。如果你认为你有太多的子节点，那么也许你想用一个空的节点替换 svg 节点。如果你的 svg 节点有一些属性，你可以使用一个标签来放置所有子节点，然后用一个空的节点替换节点。

【参考方案3】：

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

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

【讨论】：

必须在 svg.html(null) 上使用它才能与 IE 11 一起使用。谢谢。

请注意，这里的 svg 变量是 d3 选择，而不是问题中的 SVGSVGElement 对象。它可能会用d3.select(svg).selectAll("*").remove();

修复

【参考方案4】：

我同意使用克隆并将元素替换为克隆的元素。

只有一行代码：

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

【讨论】：

如果你有现有的定义怎么办？

把你的 defs 放到这个元素之外。

【参考方案5】：

我试过svg.text("")，它似乎工作。清除所有内部文本，保留属性。

【参考方案6】：

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

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

这将在末尾附加 svg， 你可能想在之前获取元素并根据需要附加

【参考方案7】：

如果你想像我一样保留你的 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++);
    

【参考方案8】：

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

还有拉斐尔：jQuery SVG vs. Raphael

我很想翻遍，看看他们在用谁的.destroy() 方法。

【讨论】：

看起来他们正在做 Aseem 的工作：paperproto.clear = function () var c = this.canvas; while (c.firstChild) c.removeChild(c.firstChild);

【参考方案9】：

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

我的想法来自http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/

【讨论】：

这将删除元素本身而不是清空它，但确实适用于 SVG。

如何删除整个元素'工作'？这不是所要求的。

【参考方案10】：

无需循环，只需分配一个空字符串

svg.innerHTML = "";