javascript - SVG 到图像转换麻烦

Question

我正在尝试使用 JS 将以下 SVG 字符串转换为图像:

<svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-line" id="test-chart" 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"><span class="lineChartLabel ct-horizontal ct-end" style="width: 357px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">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/2000/xmlns/">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/2000/xmlns/">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/2000/xmlns/">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/2000/xmlns/">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/2000/xmlns/">1.5%</span></foreignObject></g></svg>  

我尝试了所有能找到的东西，比如 simg.js 或者这个脚本，例如:

var svg  = document.getElementById('test-chart'),
xml  = new XMLSerializer().serializeToString(svg),
data = "data:image/svg+xml;base64," + btoa(xml),
img  = new Image();
img.setAttribute('src', data)
document.body.appendChild(img)

但是生成的图像总是“损坏”，即根本不出现。使用更简单的 SVG 字符串的相同脚本就可以正常工作。

我不明白我的字符串到底出了什么问题，它是由 Chartist.js 生成的，并且在浏览器中显示得很好，但罪魁祸首似乎是 <foreignObject>元素，就像我删除它们一样，一切正常。

有没有办法用 JS 将 SVG 字符串转换为图像？

Answer 1

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

我确实相信您没有自己设置，并且您使用的库做到了这一点。

您可以给其作者留下问题报告，但请注意 IE<11 不支持此 <foreignObject>标签，并且当前 Safari 对 <img> 有一些安全限制代表这样一个标签的标签(如果你想把它拉回 Canvas ，它会污染这个标签)。所以我个人的意见仍然不推荐使用这个标签。

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

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

您的标记应如下所示:

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') )