SVG Strichbreite ist chaotisch auf einem HTML 5 Leinwand

Question

Ich versuche, ein SVG an eine Leinwand zu binden. Das SVG hat eine Strichbreiteneinstellung und es scheint dicker zu sein als es sein muss, wenn es an die Zeichenfläche gebunden ist. Was könnte das verursachen und wie behebe ich das?

Die Bibliothek, die ich benutze svg zum html5 Leinwand zu binden, ist canvg

Die JS Geige zeigt sowohl die SVG und das gebundene svg auf einer Leinwand.

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

Gemäß dem Link: http://jsfiddle.net/fYAAf/111/

im JavaScript-Code in einem Typenschild (Bild) die Charakteristik der SVG einbetten. Das Ergebnis ist so etwas wie dieses:

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

So sollten Sie versuchen, alle XML-Objekte innerhalb eines SVG-Tag zu setzen, wie es in dem HTML-Dokument in der Spitze des Beispiels von jsFiddle geschrieben.

In JavaScript etwas schnell würde:

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>

Ich weiß nicht, was die Ursache für dieses Verhalten in img-Tags.