在HTML5画布上绘制SVG文件

  • Z时代
  • 2024-01-10
  • 分类：问答

是否有将SVG文件绘制到HTML5画布上的默认方法？GoogleChrome支持将SVG加载为图像（并简单地使用drawImage），但是开发者控制台会对此进行警告resource interpreted asimage but transferred with MIME type image/svg+xml。

我知道将SVG转换为canvas命令的可能性，但是我希望这不是必需的。我不在乎较旧的浏览器（因此，如果FireFox 4和IE 9支持某些功能，那就足够了）。

回答：

编辑2019年12月16日

现在所有主要浏览器都支持Path2D

编辑2014年11月5日

现在，您可以 *

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

这里的例子。您应该在画布上看到一个绿色正方形。页面上的第二个绿色正方形是<svg>插入DOM中以供参考的相同元素。

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

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

回答：

没有任何一种本机可允许您在画布中本机使用SVG路径。您必须转换自己或使用一个库来为您做。

以上是 在HTML5画布上绘制SVG文件 的全部内容， 来源链接： utcz.com/qa/415007.html

回到顶部