html - SVG 笔划宽度在 html 5 画布上很乱

Question

我正在尝试将 SVG 绑定到画布。SVG 有一个笔触宽度设置，它似乎比绑定到画布时所需的要厚。什么可能导致这种情况以及如何解决这个问题？

我用来将 svg 绑定到 html5 画布的库是canvg

下面的 JS 小提琴在画布上显示了 SVG 和绑定的 svg。

JS 小提琴：http: //jsfiddle.net/fYAAf/111/

var image = new Image();
var canvas = document.createElement('canvas');
canvas.width =1090;
canvas.height = 1875;
var context = canvas.getContext('2d');
context.drawSvg(xml, 0, 0);
image.src = canvas.toDataURL();

Answer 1

根据链接：http: //jsfiddle.net/fYAAf/111/

在 javascript 代码中，您将 SVG 的特征嵌入到类型标记（图像）中。结果是这样的： 

<img src="data:image/png;basQAACAnWQXByGjnghZGYT8......characteristic_of_SVG">

因此，您应该尝试将所有 XML 属性放在一个 SVG 标记中，因为它是在 jsFiddle 示例顶部的 HTML 文档中编写的。

在 JavaScript 中，快速的东西会：

var xml = "<svg> (Write here xml properties) <g><text (Write here text properties)><tspan dy="35" x="0">Test</tspan></text></g></svg>";

document.getElementById('container').innerHTML = xml;

<div id="container"></div>

我不知道 img 标签中这种行为的原因是什么。