В HTML я могу очистить элемент <div> с помощью этой команды:
div.innerHTML = "";
Есть ли эквивалент, если у меня есть элемент <svg>? Я не могу найти метод innerHTML и innerXML или даже innerSVG.
Я знаю, что SVG DOM является надмножеством XML DOM, поэтому я знаю, что могу сделать что-то вроде этого:
while (svg.lastChild) {
svg.removeChild(svg.lastChild);
}
Но это и утомительно, и медленно. Есть ли более быстрый или простой способ очистки элемента SVG?
Вы уже дали один ответ: вы всегда можете просто перебрать все дочерние элементы и удалить их. Если вы считаете, что у вас слишком много дочерних узлов, возможно, вы захотите заменить svg node на пустую. Если у вашего svg node есть некоторые атрибуты, вы можете использовать тег, в который вы помещаете все дочерние узлы, а затем просто замените node на пустой.
Если вы используете jQuery, вы можете просто сделать
$("#svgid").empty();
Этот удаляет все дочерние элементы из svg, оставляя без изменений другие атрибуты, такие как ширина и высота.
Используйте d3.js. Это приведет к удалению всех узлов содержимого из svg.
svg.selectAll("*").remove();
Я согласен использовать клон и заменяю элемент клонированным.
Только один код строки:
svg.parentNode.replaceChild(svg.cloneNode(false), svg);
используйте это? http://keith-wood.name/svg.html
там также raphael: jQuery SVG против Рафаэля
У меня возникнет соблазн пройтись и посмотреть, кто из них выполняет свои методы .destroy().
element = document.getElementById("elementID");
element.parentNode.removeChild(element);
У меня появилась идея http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/
Я пробовал svg.text("") и, похоже, работает. Очищает весь внутренний текст, сохраняет атрибуты.
Вы можете использовать клон и заменить элемент клонированным.
var parentElement = svg.parentElement
var emptySvg = svg.cloneNode(false);
parentElement.removeChild(svg);
parentElement.appendChild(emptySvg);
Это добавит svg в конце, вы можете захотеть получить элемент до и добавить accordinaly