在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目前在安全性方面"不稳定",并禁止您在将任何 SVG 绘制到画布(无论域名)后阅读画布(例如getImageData()或者toDataURL()), 这些已经修复

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);