Créer un élément du DOM de SVG à partir d'une Chaîne

Comment pourrais-je aller sur la création d'un élément du DOM de SVG à partir d'un String?

Exemple:

var svgStr = '<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg"><!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/--><g><title>background</title><rect fill="#fff" id="canvas_background" height="402" width="502" y="-1" x="-1"/><g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"><rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/></g></g><g><title>Layer 1</title><path id="svg_1" d="m118,242l64,-153l63,157c0,0 45,-71 49,-68c4,3 11,146 12,146c1,0 -173,-7 -173,-7c0,0 -61,-72 -61,-72c0,0 110,-156 46,-3z" fill-opacity="0.7" stroke-width="2" stroke="#995757" fill="#995757"/></g></svg>';
Quelle langue est-ce? (var ne fait pas partie de SVG ou XML; c'est du JavaScript? Une autre langue?)Merci d'éditer votre question et ajouter les informations nécessaires.
fait juste, désolé. C'est en JavaScript
J'ai posté une réponse possible. Vous pouvez l'essayer dans le JSFiddle.

OriginalL'auteur Nik Kyriakides | 2014-06-08

  1. 20

    Vous pouvez utiliser DOMParser pour analyser une chaîne de caractères XML.

    var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");

    L'élément racine de la chaîne à analyser sera doc.documentElement

    Pour que cela fonctionne correctement croix-navigateur, vous aurez besoin de mettre le code html de l'espace de noms par exemple, votre chaîne devra ressembler à ceci...

    var svg2='<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" ...
    Dans mon cas, à l'aide de DOM Parser fait le rendu de SVGs très très lent et à la traîne. J'ai essayé en ajoutant SVG (pas comme une chaîne de caractères) et il n'y avait pas de problèmes de performances. Toutes les informations dans le présent? Comment, par ailleurs, sur IE l'aide pour cela?
    Poser de nouvelles questions séparément, bien que FWIW IE prend en charge cette.
    Je l'ai fait, mais il n'y a pas de réponse à cela. Si vous pouvez, regardez - stackoverflow.com/questions/41331760/...

    OriginalL'auteur Robert Longson

  2. 7

    En supposant que vous êtes à l'aide de JavaScript, vous pouvez tout simplement passer à la chaîne comme le innerHTML d'un élément existant obtenus via l'API DOM:

    var svg2 = "<svg ...> ... </svg>";
var container = document.getElementById("container");
container.innerHTML = svg2;

    Voir: JSFiddle

    Je ne suis pas sûr IE versions précédentes, mais il devrait certainement fonctionner dans la version actuelle (je ne peux pas le tester car je suis dans un Mac). Il travaille également dans Firefox 29.0.1, Chrome 35.0 et de l'Opéra de 22,0.

    OriginalL'auteur helderdarocha

  3. 1

    De la lecture et de l'écriture de la innerHTML d'un SVG dans le code HTML semble bien fonctionner sauf dans Internet Explorer (9-11): http://cs.sru.edu/~ddailey/svg/IframeSVG.htm . Si l'on doit IE compatibilité (comme dans une vraie application web) puis utilisez les méthodes du DOM pour créer un récipient approprié (d'objet, iframe ou intégrer) et de construire le SVG, un childNode à un moment, par les méthodes du DOM dans ce conteneur. ) C'est un peu une corvée, mais les bases sont couvertes à http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_HTML.

    OriginalL'auteur user3665322