web-dev-qa-db-de.com

Gibt es eine einfache Möglichkeit, den Inhalt eines SVG-Elements zu löschen?

In HTML kann ich ein <div>-Element mit diesem Befehl löschen:

div.innerHTML = "";

Gibt es ein Äquivalent, wenn ich ein <svg>-Element habe? Ich kann keine innerHTML- oder innerXML- oder gar innerSVG-Methode finden.

Ich weiß, dass das SVG-DOM eine Obermenge des XML-DOM ist. Ich weiß, dass ich so etwas tun kann:

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

Dies ist jedoch langwierig und langsam. Gibt es einen schnelleren oder einfacheren Weg, ein SVG-Element zu löschen?

41
Aseem Kishore

Sie haben bereits eine Antwort gegeben: Sie können immer alle Kinder durchlaufen und entfernen. Wenn Sie der Meinung sind, dass Sie zu viele untergeordnete Knoten haben, möchten Sie möglicherweise den svg-Knoten durch einen leeren Knoten ersetzen. Wenn Ihr SVG-Knoten über einige Attribute verfügt, können Sie ein Tag verwenden, an dem Sie alle untergeordneten Knoten platzieren und dann den Knoten durch einen leeren Knoten ersetzen.

24
Volker

Wenn Sie jQuery verwenden, können Sie dies einfach tun

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

Dieses löscht alle untergeordneten Elemente der svg, wobei die anderen Attribute wie width und height unverändert bleiben.

35
FrancesKR

Verwenden Sie d3.js. Dadurch werden alle Inhaltsknoten aus SVG entfernt.

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

Ich bin damit einverstanden, den Klon zu verwenden und das Element durch das geklonte zu ersetzen.

Nur ein Zeilencode:

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

benutze das? http://keith-wood.name/svg.html

es gibt auch raphael: jQuery SVG vs. Raphael

Ich würde versucht sein, durchzuwühlen und zu sehen, wen sie ihre .destroy()-Methoden anwenden.

0
Moin Zaman

Ich habe svg.text("") ausprobiert und es scheint zu funktionieren. Löscht den gesamten inneren Text und behält die Attribute bei.

0
Calvin Li

Sie können den Klon verwenden und das Element durch das geklonte ersetzen.

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

Dies wird die svg am Ende anhängen. Sie möchten das Element vorher erhalten und Akkordeon anhängen

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

Ich habe die Idee von http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/

0
Travis