Czy istnieje prosty sposób na wyczyszczenie zawartości elementu SVG?

Question

W HTML, mogę usunąć element <div> z tym poleceniem:

div.innerHTML = ""; 

Czy istnieje odpowiednik jeśli mam element <svg>? Nie mogę znaleźć metody innerHTML ani innerXML ani nawet innerSVG.

Wiem SVG DOM jest rozszerzeniem XML DOM, więc wiem, że mogę zrobić coś takiego:

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

Ale to jest żmudny i powolny. Czy istnieje szybszy lub łatwiejszy sposób na usunięcie elementu SVG?

Answer 1

Podałeś już jedną odpowiedź: zawsze możesz zapętlić wszystkie dzieci i je usunąć. Jeśli uważasz, że masz zbyt wiele węzłów potomnych, to być może chcesz zastąpić węzeł svg pustym. Jeśli twój węzeł svg ma pewne atrybuty, możesz użyć znacznika, w którym umieścisz wszystkie węzły potomne, a następnie po prostu zastąp węzeł pustym.

Answer 2

użyć tego? http://keith-wood.name/svg.html

istnieje również Raphael: jQuery SVG vs. Raphael

byłbym skłonny do włoka przez i zobaczyć, kto robią swoje .destroy() metod.

Answer 3

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

mam pojęcia od http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/

Answer 4

Jeśli używasz jQuery, można po prostu zrobić

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

Ten deletes all child elements z SVG, pozostawiając swoje inne atrybuty takie jak szerokość i wysokość nienaruszonego .

Answer 5

Próbowałem już svg.text("") i wygląda na to, że działa. Usuwa cały tekst wewnętrzny, zachowuje atrybuty.

Answer 6

Użyj d3.js. Spowoduje to usunięcie wszystkich węzłów zawartości z svg.

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

Answer 7

Możesz użyć klonu i zamienić element na sklonowany.

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

To doda SVG na końcu, może chcesz uzyskać element przed i dołącz accordinaly

Answer 8

zgadzam używać klonu i wymienić wkład ze sklonowanego jeden.

Tylko jedna linia kodu:

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