Kann bestehende SVG-Datei nicht ändern

Question

Ich möchte ein Kreiselement in einer Svg-Datei hinzufügen. Ich importiere die Datei über d3.xml und angehängt das Kreiselement in Svg, aber der Kreis wird nicht auf dem SVG-Bild angezeigt. Wenn ich versuche, SvgNode zu drucken, kann ich das Kreiselement anzeigen, aber es wird nicht auf dem Bildschirm angezeigt?

d3.xml("img/myImage.svg", function(error, documentFragment) { 
    if (error) {console.log(error); return;} 

    var svgNode = documentFragment 
    .getElementsByTagName("svg").contentDocument; 

    d3.select(svgNode) 
    .selectAll("g") 
    .append("circle") 
    .attr("cx", 500) 
    .attr("cy", 25) 
    .attr("r", 150) 
    .style("fill", "purple"); 

    console.log(svgNode); 

?

MyImage.svg Datei sieht wie folgt aus

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    xmlns:cc="http://creativecommons.org/ns#" 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1" 
    id="svg2" 
    viewBox="0 0 7086.6142 7440.9448" 
    height="2100mm" 
    width="2000mm"> 
    <defs 
    id="defs4" /> 
    <metadata 
    id="metadata7"> 
    <rdf:RDF> 
     <cc:Work 
     rdf:about=""> 
     <dc:format>image/svg+xml</dc:format> 
     <dc:type 
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
     <dc:title></dc:title> 
     </cc:Work> 
    </rdf:RDF> 
    </metadata> 
    <g 
    transform="translate(0,6388.5827)" 
    id="layer1"> 
    <image 
     width="7086.5693" 
     height="7441.2446" 
     preserveAspectRatio="none" 
     style="image-rendering:optimizeQuality" 
     xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAg0CAYAAADhpe0EAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBI 
id="image4144" 
     x="0.063134782" 
     y="-6388.8481" /> 

    </g> 
</svg> 

Answer 1

Sie this example folgenden werden sollten:

d3.xml("somefile.svg", function(error, xml) { 
    if (error) throw error; 

    document.body.appendChild(xml.documentElement); 

    d3.select('svg') 
     .select("g") 
     .append("circle") 
     .attr("cx", 500) 
     .attr("cy", 25) 
     .attr("r", 150) 
     .style("fill", "purple"); 
}); 

Lauf code.