画布drawImage内嵌svg在Firefox上不起作用 [英] Canvas drawImage inline svg doesn't work on Firefox

问题描述

这是一个将svg转换为画布的示例的提琴演奏: http://jsfiddle .net/Na6X5/944/

Here is a fiddle of an example that takes an svg and turns it into a 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)上生成了一个空画布，没有任何错误.

This works fine on Chrome(51.0). But produces an empty canvas on Firefox(47.0.1) with no errors.

此示例可在Firefox http://codepen.io/keithwyland/pen/umova 上运行但是将图像的src更改为嵌入式svg会产生上面列出的问题 http://codepen.io/Ewhite613/pen/YWZoGy

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

推荐答案

SVG图像数据必须具有不是百分比的width和height属性.

The SVG image data must have width and height attributes that are not percentages.

这篇关于画布drawImage内嵌svg在Firefox上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！