html - 在 HTML5 Canvas 上绘制 SVG 文件

Question

是否有一种默认方法可以将 SVG 文件绘制到 HTML5 Canvas 上？ Google Chrome 支持将 SVG 作为图像加载(并且只需使用 drawImage)，但开发者控制台会警告 resource interpreted as image but transferred with MIME type image/svg+xml.

我知道有可能将 SVG 转换为 Canvas 命令(如 this question )，但我希望不需要这样做。我不关心旧版浏览器(所以如果 FireFox 4 和 IE 9 支持某些东西，那就足够了)。

Answer 1

编辑:2019 年 12 月

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

---

编辑:2014 年 11 月

您现在可以使用 ctx.drawImage绘制具有 .svg 的 HTMLImageElements来源在some but not all browsers (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 .您应该会在 Canvas 中看到一个绿色方 block 。页面上第二个绿色方 block 也是一样<svg>元素插入 DOM 以供引用。

您还可以使用新的 Path2D 对象绘制 SVG(字符串)路径。换句话说，你可以这样写:

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

Live example of that here.

---

2010 年原始答案:

没有任何原生功能可以让您在 Canvas 中原生使用 SVG 路径。您必须自己转换或使用图书馆为您完成。

我建议查看 canvg:(检查 homepage & demos )

canvg takes the URL to an SVG file, or the text of the SVG file, parses it in JavaScript and renders the result on Canvas.