Erstellen eines SVG-DOM-Elements aus einem String

Wie würde ich ein SVG-DOM-Element aus einer String erstellen?Erstellen eines SVG-DOM-Elements aus einem String

Beispiel:

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

2014-06-08 Nicholas Kyriakides

Welche Sprache ist das? ('var' ist nicht Teil von SVG oder XML; ist es JavaScript? Eine andere Sprache?) Bitte bearbeiten Sie Ihre Frage und fügen Sie die richtigen Tags hinzu. – helderdarocha

@helderdarocha gerade getan, tut mir leid. Es ist in JavaScript –

Ich habe eine mögliche Antwort gepostet. Sie können es im JSFiddle ausprobieren. – helderdarocha

Sie können DOMParser verwenden, um eine XML-Zeichenfolge zu analysieren.

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

Das Wurzelelement für die analysierte Zeichenfolge

Für diese doc.documentElement ordnungsgemäß Cross-Browser zu arbeiten, müssen Sie die HTML-Namensraum, dh die Zeichenfolge einstellen müssen wie folgt aussehen. ..

var svg2='<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" ...

Quelle

2014-06-08 17:45:56

In meinem Fall machte die Verwendung von DOM Parser das Rendern von SVGs sehr langsam und verzögert. Ich habe versucht, SVG anzuhängen (nicht als String) und es gab keine Performance-Probleme. Irgendwelche Infos dazu? Wie sieht es mit IE-Unterstützung dafür aus? –

Stellen Sie neue Fragen separat, obwohl FWIW IE dies unterstützt. –

tat ich, aber es gibt keine Antwort darauf. Wenn Sie können, werfen Sie bitte einen Blick - http://stackoverflow.com/questions/41331760/appending-svgs-in-a-div-in-js –

Angenommen, Sie JavaScript verwenden, können Sie einfach die Zeichenfolge als innerHTML eines vorhandenen Elements über das DOM API erhalten passieren:

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

See: JSFiddle

Quelle

2014-06-08 15:34:54 helderdarocha

Ich bin mir nicht sicher über IE früheren Versionen, aber es sollte sicherlich in der aktuellen Version funktionieren (ich kann es nicht testen, weil ich in einem Mac bin). Es funktioniert auch in Firefox 29.0.1, Chrome 35.0 und Opera 22.0. – helderdarocha

Lesen und Schreiben der innerHTML einer SVG in HTML scheint gut zu funktionieren im Internet Explorer (9-11): http://cs.sru.edu/~ddailey/svg/IframeSVG.htm. Wenn Sie IE-Kompatibilität (wie in einer echten Webanwendung) benötigen, dann verwenden Sie DOM-Methoden, um einen geeigneten Container (object, iframe oder embed) zu erstellen und das SVG, jeweils einen childNode, über DOM-Methoden in diesem Container zu erstellen.) Es ist ein bisschen mühsam, aber die Grundlagen sind bei http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_HTML abgedeckt.

Quelle

2014-06-08 17:06:00 user3665322

Erstellen eines SVG-DOM-Elements aus einem String

Antwort

Verwandte Themen