这是一个将 svg 转换为 Canvas 的示例:http://jsfiddle.net/Na6X5/944/
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var svg = document.getElementById('mySVG');
var img = new Image();
img.onload = function() {
console.log(img.width, img.height)
document.getElementById('canvas1').width = 300
document.getElementById('canvas1').height = 200
ctx.drawImage(img, 0, 0, 300, 200);
}
img.src = "data:image/svg+xml," + encodeURIComponent(svg.outerHTML)
这在 Chrome(51.0) 上运行良好。但在 Firefox(47.0.1) 上生成一个空 Canvas ,没有错误。
此示例适用于 Firefox http://codepen.io/keithwyland/pen/umova但是将图像的 src 更改为内联 svg 会产生上面列出的问题 http://codepen.io/Ewhite613/pen/YWZoGy
最佳答案
SVG 图像数据必须具有不是百分比的宽度和高度属性。
关于javascript - Canvas drawImage 内联 svg 在 Firefox 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38106906/