Working fiddle.
HTML:
JavaScript的:
var svg = document.getElementsByTagName('svg')[0];
var svg_xml = (new XMLSerializer()).serializeToString(svg),
blob = new Blob([svg_xml], {type:'image/svg+xml;charset=utf-8'}),
url = window.URL.createObjectURL(blob);
var img = new Image();
img.width = 730;
img.height = 300;
img.onload = function(){
var canvas = document.createElement('canvas');
canvas.width = 730;
canvas.height = 300;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 730, 300);
window.URL.revokeObjectURL(url);
var canvasdata = canvas.toDataURL('image/png');
var a = document.getElementById('imgId');
a.download = "export_" + Date.now() + ".png";
a.href=canvasdata;
}
img.src = url
你的问题:
为什么图像只加载大约1/4的SVG?
回答:
只要按照这些规则:
< rect />的x < rect />的宽度< =< svg />的宽度
> y< rect /> < rect />的高度< =< svg />的高度
例如:
fill="none" stroke="blue" stroke-width="10" />
这里,< rect /> = 10,< rect />的宽度= 550,宽度< svg> = 500
因此,10 550> 500
在这种情况下,图像将被部分渲染.
希望这将解决你的问题.