Есть ли простой способ очистить содержимое элементов SVG?

В HTML я могу очистить элемент <div> с помощью этой команды:

div.innerHTML = "";

Есть ли эквивалент, если у меня есть элемент <svg>? Я не могу найти метод innerHTML и innerXML или даже innerSVG.

Я знаю, что SVG DOM является надмножеством XML DOM, поэтому я знаю, что могу сделать что-то вроде этого:

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

Но это и утомительно, и медленно. Есть ли более быстрый или простой способ очистки элемента SVG?

Ответы

Ответ 1

Вы уже дали один ответ: вы всегда можете просто перебрать все дочерние элементы и удалить их. Если вы считаете, что у вас слишком много дочерних узлов, возможно, вы захотите заменить svg node на пустую. Если у вашего svg node есть некоторые атрибуты, вы можете использовать тег, в который вы помещаете все дочерние узлы, а затем просто замените node на пустой.

Ответ 2

Если вы используете jQuery, вы можете просто сделать

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

Этот удаляет все дочерние элементы из svg, оставляя без изменений другие атрибуты, такие как ширина и высота.

Ответ 3

Используйте d3.js. Это приведет к удалению всех узлов содержимого из svg.

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

Ответ 4

Я согласен использовать клон и заменяю элемент клонированным.

Только один код строки:

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

Ответ 5

используйте это? http://keith-wood.name/svg.html

там также raphael: jQuery SVG против Рафаэля

У меня возникнет соблазн пройтись и посмотреть, кто из них выполняет свои методы .destroy().

Ответ 6

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

У меня появилась идея http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/

Ответ 7

Я пробовал svg.text("") и, похоже, работает. Очищает весь внутренний текст, сохраняет атрибуты.

Ответ 8

Вы можете использовать клон и заменить элемент клонированным.

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

Это добавит svg в конце, вы можете захотеть получить элемент до и добавить accordinaly