web-dev-qa-db-ja.com

SVG要素のコンテンツをクリアする簡単な方法はありますか？

HTMLでは、次のコマンドで<div>要素をクリアできます。

div.innerHTML = "";

<svg>要素がある場合、同等のものはありますか？ innerHTMLもinnerXMLもinnerSVGメソッドすら見つかりません。

SVG DOMはXML DOMのスーパーセットであることがわかっているので、次のようなことができることを知っています。

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

しかし、これは退屈で時間がかかります。 SVG要素をクリアするより高速または簡単な方法はありますか？

javascriptxmldomsvg
50
Aseem Kishore

すでに1つの答えがありました。いつでもすべての子をループして削除できます。子ノードが多すぎると思う場合は、svgノードを空のノードに置き換えたいかもしれません。 svgノードにいくつかの属性がある場合は、すべての子ノードを配置するタグを使用して、ノードを空のノードに置き換えることができます。

27
Volker

JQueryを使用している場合は、次のことができます。

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

この すべての子要素を削除します svgの他の属性（幅や高さなど）はそのままにします。

40
FrancesKR

D3.jsを使用します。これにより、svgからすべてのコンテンツノードが削除されます。

svg.selectAll("*").remove();
19
Praveen Prasannan

クローンを使用し、要素をクローンしたものに置き換えることに同意します。

1行のコードのみ：

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

クローンを使用して、エレメントをクローンされたエレメントに置き換えることができます。

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

これにより、最後にsvgが追加されます。前に要素を取得し、それに応じて追加することをお勧めします。

1
Yaron Shamir

これを使って？ http://keith-wood.name/svg.html

ラファエルもあります： jQuery SVG vs. Raphael

私は、彼らが.destroy()メソッドを実行している人を探して、誘惑したくなるでしょう。

0
Moin Zaman

svg.text("")を試しましたが、うまくいくようです。すべての内部テキストをクリアし、属性を保持します。

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

http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/ からアイデアを得た

0
Travis