Question

我想在svg文件中添加一个圆元素。我通过d3.xml导入文件并在svg中附加circle元素，但是svg图像上没有显示圆圈。当我尝试打印svgNode时，我能够查看圆形元素，但它没有显示在屏幕上？

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文件看起来像这样

<?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

您应该关注this example：

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");
});

正在运行code。

无法更改现有的svg文件

1 个答案: