Anfügen SVG-Elemente von SVG-Code

Ich habe einige Basis-HTML wie:Anfügen SVG-Elemente von SVG-Code

<body> 
    <svg id="msvg"></svg> 
<body>

Ich möchte (zum Beispiel) hinzufügen, um ein <g><circle cx="10" cy="50" r="20"/><rect width="200" height="400" /> </g> Element in mein SVG.

Das Element wird als Zeichenfolge in JavaScript angegeben.

Ich habe darüber nachgedacht, etwas wie folgt aus:

function addSVG(svg) { 
    var e = document.getElementById("msvg"); 
    var nodeelem = document.createElementNS("http://www.w3.org/2000/svg", "template"); 
    nodeelem.innerHTML = svg; 
    e.appendChild(nodeelem.content.firstChild); 
}

Aber das funktioniert nicht.

Ich verwende Chrom Embedded, also ist eine chromspezifische Antwort auch gut.

Quelle

2016-08-03 akaltar

Es gibt keine SVG-Element namens template ? Was versuchst du mit "Vorlage" zu tun? –

Was der Name impliziert: Verwenden Sie es als Vorlage/Platzhalter. – akaltar

"'Encaught TypeError: document.getElementByID ist keine Funktion'" –

Um auf das erste Kind von nodeelem zuzugreifen, müssen Sie nodeelem.firstChild statt nodeelem.content.firstChild verwenden.

Demo: https://jsfiddle.net/iRbouh/su3xrfd9/

Quelle

2016-08-03 13:52:31

Ich bin mir ziemlich sicher, dass es mehr als einen Weg gibt (und diese wird nicht die beste sein?), Aber man kann versuchen:

var svg = '<g><circle cx="10" cy="50" r="20"/><rect width="200" height="400" /> </g>'; 
var e = document.getElementById("msvg"); 
var svgObj = (new DOMParser()).parseFromString(svg, 'application/xml'); 
e.innerHTML = svgObj.documentElement.outerHTML;

Quelle

2016-08-03 14:12:15 Wolfgang

Das Problem hier ist, dass ich anfügen und nicht ersetzen muss. (aus Performance-Gründen) Ansonsten würde es ohne den DOMParser funktionieren. – akaltar

@alkaltar die Wahrheit ist- Ich wollte das Dokument anhängen, aber ich konnte nicht herausfinden, wie ich das gemacht habe und will nicht viel Zeit damit verbringen, eine Lösung zu finden ;-) – Wolfgang

Antwort

Verwandte Themen