当前位置：文江博客话题详情

在 HTML5 Canvas 上绘制 SVG，支持字体元素

发布于 2024-10-28 23:15:04 字数 130 浏览 1 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

趁微风不噪 2024-11-04 23:15:04

支持 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 上有效（并且看起来相同）。

[编辑] 请注意：

~~Chrome 和 Firefox 目前在安全性上“押注”，不允许您阅读画布（例如 getImageData() 或 toDataURL()) 在将任何 SVG 绘制到画布上（无论域如何）~~ 这些已修复
Firefox 目前有一个错误，它拒绝绘制 SVG到画布上，除非 SVG 指定了 height 和 width 属性。

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

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.

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.

[Edit] Note that:

~~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 currently has a bug where it refuses to draw SVG to the canvas unless the SVG has height and width attributes specified.

回复收藏 0 原文

高速公鹿 2024-11-04 23:15:04

如果您将 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);

In case you have the svg embedded into HTML or as a raw source you can use a data URL to convert the svg to a HTML image element which you then can draw on the canvas:

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

回复收藏 0 原文