在支持字体元素的 HTML5 Canvas 上绘制 SVG答案

【问题标题】：Draw SVG on HTML5 Canvas with support for font element在支持字体元素的 HTML5 Canvas 上绘制 SVG
【发布时间】：2023-03-23 06:48:01
【问题描述】：

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

【问题讨论】：

字体（和图像）需要嵌入到 SVG 中才能正常工作：jsfiddle.net/ykx7kp8L/121

标签： html canvas svg

【解决方案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 上工作（并且看起来相同）。

[编辑]请注意：

~~Chrome 和 Firefox 目前在安全性上“下注”，并禁止您在将任何 SVG 绘制到画布后读取画布（例如 getImageData() 或 toDataURL()）（无论域）~~ these have been fixed
Firefox 目前有一个错误，它拒绝将 SVG 绘制到画布上，除非 SVG 指定了 height 和 width 属性。

【讨论】：

@Nilesh FireFox 的操作系统和版本是什么？它适用于我在 Windows 7 上使用 FF4.0。
我在 javascript 中有一个 svg 作为字符串。我像img.src = "data:image/svg+xml,"+svgString; 一样使用它，它在chrome 中工作，但firefox 拒绝解析svgString 变量，因为我嵌入了CDATA 样式。更新：解决了 encodeURIComponent(svgString)
此解决方案不包含字体！你能在 Arial 之类的字体中添加一些文本（除了衬线 Times 之外的任何其他字体），看看它是否仍能正确呈现？
@headwinds 确实如此。您可以进行该测试并亲自查看。（如果您需要帮助设置字体和绘制它，您需要.font = "…" 和.fillText()。Here's a tutorial。）
@Phrogz 好的，我看到了区别 - 谢谢 - 但如果原始 SVG 有一个特殊的字体，并且您想通过序列化 SVG 将包含字体的 SVG 复制到画布，字体就赢了如果您在画布上使用 .font，则实际上不会显示，这就是为什么 graphicdesign.stackexchange.com/questions/5162/… - 您的解决方案很好，但可能并非在所有情况下都有效，具体取决于 SVG 的转换方式

【解决方案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);

【讨论】：

请注意，对于复杂的 SVG 内容，您可能会遇到数据的大小限制：URI——在我的情况下，这意味着我没有其他选择，只能使用 canvg 来绘制复杂的 SVG。

【解决方案3】：

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

【讨论】：