web-dev-qa-db-fra.com

Existe-t-il un moyen simple d'effacer le contenu d'un élément SVG?

En HTML, je peux effacer un élément <div> avec cette commande:

div.innerHTML = "";

Existe-t-il un équivalent si j'ai un élément <svg>? Je ne parviens pas à trouver une méthode innerHTML ni innerXML ni même innerSVG.

Je sais que le DOM SVG est un sur-ensemble du DOM XML, alors je sais que je peux faire quelque chose comme ceci:

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

Mais c'est à la fois fastidieux et lent. Existe-t-il un moyen plus rapide ou plus simple d'effacer un élément SVG?

javascriptxmldomsvg
41
Aseem Kishore

Vous avez déjà donné une réponse: vous pouvez toujours boucler tous les enfants et les supprimer. Si vous pensez que vous avez trop de nœuds enfants, vous voudrez peut-être remplacer le nœud svg par un nœud vide. Si votre nœud svg a des attributs, vous pouvez utiliser une balise dans laquelle vous placez tous les nœuds enfants, puis remplacez simplement le nœud par un nœud vide.

24
Volker

Si vous utilisez jQuery, vous pouvez simplement faire

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

Ceci supprime tous les éléments enfants du svg tout en laissant ses autres attributs tels que width et height intacts.

35
FrancesKR

Utilisez d3.js. Cela supprimera tous les nœuds de contenu de svg.

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

J'accepte d'utiliser le clone et de remplacer l'élément par le cloné.

Un seul code de ligne:

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

utilisez ceci? http://keith-wood.name/svg.html

il y a aussi raphael: jQuery SVG vs. Raphael

Je serais tenté de fouiller et de voir qui ils appliquent leurs méthodes .destroy().

0
Moin Zaman

J'ai essayé svg.text("") et cela semble fonctionner. Efface tout le texte intérieur, conserve les attributs.

0
Calvin Li

Vous pouvez utiliser le clone et remplacer l'élément par celui cloné.

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

Ceci ajoutera le svg à la fin, Vous voudrez peut-être obtenir l’élément avant et ajoutez ensuite

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

J'ai eu l'idée de http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/

0
Travis