[英]Canvas drawImage inline svg doesn't work on Firefox
Here is a fiddle of an example that takes an svg and turns it into a canvas: http://jsfiddle.net/Na6X5/944/ 这是一个带有svg并将其变成画布的示例的小提琴: 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)
This works fine on Chrome(51.0). 这适用于Chrome(51.0)。 But produces an empty canvas on Firefox(47.0.1) with no errors.
但是在Firefox(47.0.1)上生成一个空画布,没有错误。
This example works on Firefox http://codepen.io/keithwyland/pen/umova but changing the src of the image to an inline svg produces the problem listed above http://codepen.io/Ewhite613/pen/YWZoGy 此示例适用于Firefox http://codepen.io/keithwyland/pen/umova,但将图像的src更改为内联svg会产生上面列出的问题http://codepen.io/Ewhite613/pen/YWZoGy
SVG图像数据必须具有不是百分比的宽度和高度属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.