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

【问题标题】：SVG stroke width is messy on a html 5 canvasSVG 笔划宽度在 html 5 画布上很乱
【发布时间】：2017-01-15 18:48:05
【问题描述】：

我正在尝试将 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();

【问题讨论】：

标签： html svg html5-canvas canvg

【解决方案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;

&lt;div id="container"&gt;&lt;/div&gt;

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

【讨论】：