在 HTML5 画布上绘制 SVG 文件

编辑：2019 年 12 月

all major browsers 现在支持 Path2D() 构造函数，“允许在 2D 画布表面上声明路径对象”。

编辑：2014 年 11 月

您现在可以使用 ctx.drawImage 在 some but not all browsers 中绘制具有 .svg 源的 HTMLImageElement（75% 的覆盖率：Chrome、IE11 和 Safari 工作，Firefox 工作有一些错误，但 nightly修复它们）。

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

Live example here。您应该在画布上看到一个绿色方块。页面上的第二个绿色方块是插入 DOM 以供参考的相同 <svg> 元素。

您还可以使用新的 Path2D 对象来绘制 SVG（字符串）路径。换句话说，你可以写：

var path = new Path2D('M 100,100 h 50 v 50 h 50');
ctx.stroke(path);

Live example of that here.

2010年原始答案：

没有任何本机可以让您在画布中本机使用 SVG 路径。您必须自己转换或使用库为您转换。

我建议查看 canvg：（检查 homepage & demos）

canvg 获取 SVG 文件的 URL，或 SVG 文件的文本，在 JavaScript 中解析它并在 Canvas 上呈现结果。

---

进一步@Matyas 回答：如果 svg 的图像也在 base64 中，它将被绘制到输出。

演示：

var svg = document.querySelector('svg'); var img = document.querySelector('img'); var canvas = document.querySelector('canvas'); // 获取 svg 数据 var xml = new XMLSerializer().serializeToString(svg); // 使其成为base64 var svg64 = btoa(xml); var b64Start = '数据：图像/svg+xml；base64，'； // 添加一个“标题” var image64 = b64Start + svg64; // 将其设置为 img 元素的来源 img.onload = function() { // 将图像绘制到画布上 canvas.getContext('2d').drawImage(img, 0, 0); } img.src = image64; SVG，IMG，画布{显示：块； } SVG
图像
画布

---

您可以通过以下方式轻松地将简单的 svg 绘制到画布上：

将 svg 的源分配给 base64 格式的图像 将图像绘制到画布上

注意：该方法的唯一缺点是它无法绘制嵌入在 svg 中的图像。 （见演示）

示范：

（请注意，嵌入的图像仅在 svg 中可见）

var svg = document.querySelector('svg'); var img = document.querySelector('img'); var canvas = document.querySelector('canvas'); // 获取 svg 数据 var xml = new XMLSerializer().serializeToString(svg); // 使其成为base64 var svg64 = btoa(xml); var b64Start = '数据：图像/svg+xml；base64，'； // 添加一个“标题” var image64 = b64Start + svg64; // 将其设置为 img 元素的来源 img.src = image64; // 将图像绘制到画布上 canvas.getContext('2d').drawImage(img, 0, 0); SVG，IMG，画布{显示：块； } SVG

---

图像

---

画布

---

---

Mozilla 有一种在画布上绘制 SVG 的简单方法，称为“Drawing DOM objects into a canvas”

---

正如西蒙上面所说，使用 drawImage 不应该工作。但是，使用 canvg 库并：

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);

这来自 Simon 上面提供的链接，该链接有许多其他建议，并指出您想要链接或下载 canvg.js 和 rgbcolor.js。这些允许您在 JavaScript 函数中通过 URL 或使用 svg 标签之间的内联 SVG 代码来操作和加载 SVG。

---

要添加的东西，为了在 canvas 元素中正确显示 svg，将属性 height 和 width 添加到 svg 根元素，例如：

<svg height="256" width="421">...</svg>

或者

// Use this if to add the attributes programmatically
const svg = document.querySelector("#your-svg");

svg.setAttribute("width", `${width}`);
svg.setAttribute("height", `${height}`);

有关详细信息，请参阅 this

---