在支持字体元素的HTML5画布上绘制SVG [英] Draw SVG on HTML5 Canvas with support for font element

问题描述

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

Is there a good library for converting SVG to HTML canvas that supports the font element? I have already tried canvg, but it does not support Font.

推荐答案

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

Browsers that support HTML5 Canvas also support SVG pretty well themselves. As such, you could do this:

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

这种技术唯一的缺点是如果SVG超出你的域，画布将变得污染;如果这是您的目标，您将无法使用 getImageData（）来读取结果SVG。

The only downside to this technique is that if the SVG is outside of your domain the canvas will become tainted; you will not be able to use getImageData() to read the resulting SVG, if that is your goal.

我在我的服务器上放了一个这种技术的例子： http://phrogz.net/tmp/canvas_from_svg。 HTML

我已对此进行了测试并验证了它在IE9，Chrome v11b，Safari v5和Firefox v4上的工作情况（看起来相同）。

I've put an example of this technique on my server: http://phrogz.net/tmp/canvas_from_svg.html
I've tested this and verified that it works (and looks the same) on IE9, Chrome v11b, Safari v5, and Firefox v4.

请注意：

1. Chrome和Firefox目前'平息'安全性并且不允许你在阅读画布之后（例如 getImageData（）或 toDataURL（））你将任何 SVG绘制到画布上（不管域名） 这些已被修复

1. Chrome and Firefox currently 'punt' on security and disallow you from reading the canvas (e.g. getImageData() or toDataURL()) after you draw any SVG to the canvas (regardless of the domain) these have been fixed

Firefox目前有一个错误，它拒绝将SVG绘制到画布，除非SVG有 height 和 w指定的宽度属性。

Firefox currently has a bug where it refuses to draw SVG to the canvas unless the SVG has height and width attributes specified.

这篇关于在支持字体元素的HTML5画布上绘制SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！