SVG到图像的转换问题

您的问题是<foreignObjects>中包含的<span>元素上设置的xmlns属性是错误的。目前，它们被设置为http://www.w3.org/2000/xmlns/，这是默认的XML名称空间。它应该是http://www.w3.org/1999/xhtml，因为包含的元素属于xhtml命名空间。

我相信这不是你自己设置的，你使用的图书馆做到了。

你可以给它的作者留下一份问题报告，但请注意，IE<11不支持这个<foreignObject>标签，并且当前Safari对代表这样一个标签的<img>标签有一些安全限制（如果你想把它拖回画布，它会污染这个标签）。因此，在我个人的意见中，仍然不建议使用此标签。

还要注意，正如其他人所说，您必须将绝对width和height属性设置为根<svg>，以便它在<img>标记中正确显示。

最后，您不需要对字符串进行base64编码，从IE9到Edge，'data:image/svg+xml; charset=utf8, 'dataURI标头是所有浏览器唯一支持的标头。

以下是您的标记应该是什么样子的：

var svgData = (new XMLSerializer()).serializeToString(test)
var dataURI = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData);
var img = new Image();
img.src = dataURI;
document.body.appendChild(img);

<h3>
svg version
</h3>
<svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="500" height="200" class="ct-chart-line" id="test" style="width: 100%; height: 100%;">
  <g class="ct-grids">
    <line y1="165" y2="165" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line>
    <line y1="115" y2="115" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line>
    <line y1="65" y2="65" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line>
    <line y1="15" y2="15" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line>
  </g>
  <g>
    <g series-name="performance" class="ct-series ct-series-a">
      <path d="M50,165C53.57,165,403.415,155,406.984,155" class="ct-line"></path>
    </g>
    <g series-name="bemchmark" class="ct-series ct-series-b">
      <path d="M50,165C53.57,165,403.415,45,406.984,45" class="ct-line"></path>
    </g>
  </g>
  <g class="ct-labels">
    <foreignObject style="overflow: visible;" x="40" y="170" width="356.984375" height="20" requiredExtensions="http://www.w3.org/1999/xhtml"><span class="lineChartLabel ct-horizontal ct-end" style="width: 357px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">Jan</span></foreignObject>
    <foreignObject style="overflow: visible;" x="396.984375"
    y="170" width="30" height="20"><span class="lineChartLabel ct-horizontal ct-end" style="width: 30px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">Feb</span></foreignObject>
    <foreignObject style="overflow: visible;" y="115" x="10" height="50" width="30" ><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">0%</span></foreignObject>
    <foreignObject style="overflow: visible;" y="65" x="10" height="50" width="30" ><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">0.5%</span></foreignObject>
    <foreignObject style="overflow: visible;" y="15" x="10" height="50" width="30" ><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">1%</span></foreignObject>
    <foreignObject style="overflow: visible;" y="-15" x="10" height="30" width="30" ><span class="lineChartLabel ct-vertical ct-start" style="height: 30px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">1.5%</span></foreignObject>
  </g>
</svg>
<h3>
img version
</h3>

因此，如果您以前不能解决这个问题，您将不得不遍历包含在<foreignObject>元素中的所有HTML元素，并手动修复它（HTMLelem.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')）

您可以使用fabric js：http://fabricjs.com/

var addShape = function(shapeName) {
fabric.loadSVGFromURL('../assets/' + shapeName + '.svg', function(objects, options) {
  var loadedObject = fabric.util.groupSVGElements(objects, options);
   loadedObject.set({
     left: 0,
     top:0,
     angle:0
   }).setCoords();
  canvas.add(loadedObject);
  window.open(canvas.toDataURL('png'));
  });
};