Ширина штриха SVG беспорядочна на холсте html 5

Question

Я пытаюсь связать SVG с холстом. SVG имеет настройку ширины штриха и, кажется, толще, чем он должен быть, когда привязан к холсту. Что может быть причиной этого и как это исправить?

библиотека, которую я использую, чтобы связать SVG с html5 холст canvg

скрипку JS ниже показывает, как SVG и связанный SVG на холсте.

JS Fiddle: 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/

В яваскрипта коде вы вложению характеристику SVG в типе тэга (изображения). В результате получается нечто вроде этого:

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

Таким образом, вы должны попытаться поставить все свойства XML в пределах SVG тега, как написано в HTML-документе, в верхней части примера jsFiddle.

В 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-теги.