小编典典

在HTML5画布上绘制SVG文件

html

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

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


阅读 528

收藏
2020-05-10

共1个答案

小编典典

编辑2019年12月16日

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

编辑2014年11月5日

现在,您可以 在某些(但不是全部)浏览器中*ctx.drawImage绘制具有.svg源的HTMLImageElement
。Chrome,IE11和Safari可以工作,Firefox可以解决一些错误(但每晚都修复了这些错误)。
*

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路径。您必须转换自己或使用一个库来为您做。

2020-05-10