在支持字体元素的HTML5画布上绘制SVG

问题描述：

是否有一个用于将SVG转换为支持字体元素的HTML画布的好库？我已经尝试过canvg，但它不支持Font。在支持字体元素的HTML5画布上绘制SVG

答

支持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 4版。

[编辑]需要注意的是：

~~Chrome和Firefox目前的安全 '平底船'，并从阅读画布（如 getImageData()或 toDataURL()）绘制任何 SVG后不允许你画布（不管域名）~~ these have been fixed
Firefox目前有一个错误e除非SVG指定了height和width属性，否则它拒绝将SVG绘制到画布上。

这不适用于firefox – Nilesh 2011-05-02 19:00:45

@Nilesh什么操作系统和FireFox的版本？它适用于我在Windows 7上使用FF4.0。 – Phrogz 2011-05-02 19:45:55

我在JavaScript中有一个svg作为字符串。我使用它像'img.src =“data：image/svg + xml，”+ svgString;'它使用chrome，但firefox拒绝解析'svgString'变量，因为我嵌入了CDATA样式。更新：使用encodeURIComponent（svgString）解决 – arunkjn 2013-11-21 13:17:39

答

如果你已经在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);

请注意，对于复杂的SVG内容，可能会遇到数据的大小限制：URI - 在我的情况下，这意味着我没有除了使用canvg来绘制复杂的SVG之外的其他选项。 – 2014-08-01 09:34:30

答

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

在支持字体元素的HTML5画布上绘制SVG

相关推荐