在HTML5 Canvas上绘制SVG并支持font元素

Question

是否有一个很好的库可以将SVG转换为支持字体元素的HTML画布？我已经尝试了canvg，但它不支持Font。

Answer 1

支持HTML5 Canvas的浏览器也能很好地支持SVG。因此，你可以这样做：

var img = new Image;
img.onload = function(){ myCanvasContext.drawImage(img,0,0); };
img.src = "foo.svg";

这种技术的唯一缺点是，如果SVG位于您的域之外，画布将被污染;如果这是您的目标，您将无法使用getImageData()来阅读生成的SVG。

我在我的服务器上放了一个这种技术的例子：http://phrogz.net/tmp/canvas_from_svg.html
我已对此进行了测试并验证了它在IE9，Chrome v11b，Safari v5和Firefox v4上的工作原理（并且看起来相同）。

[编辑] 请注意：

1. Chrome和Firefox目前在安全性问题上“不知所措”，并禁止您在绘制任何之后阅读画布（例如getImageData()或toDataURL()） SVG到画布（不论域名） these have been fixed

2. Firefox目前有一个错误，它拒绝将SVG绘制到画布，除非SVG指定了height和width属性。

Answer 2

如果您将svg嵌入到HTML中或作为原始源，您可以使用数据URL将svg转换为HTML图像元素，然后您可以在画布上绘制：

var img = new Image();
// here attach an onload handler that draws the image on the canvas

// svgSource is the raw svg xml
img.src = "data:image/svg+xml," + encodeURIComponent(svgSource);

Answer 3

我刚尝试了一个简单的img标签，Phrogs的方法和canvg。我的SVG有一个嵌入式PNG。这只适用于canvg。其他人显示没有嵌入PNG的图像。那是在Android Jellybean上使用标准浏览器或Chrome。