是否有将SVG文件绘制到HTML5画布上的默认方法?GoogleChrome支持将SVG加载为图像(并简单地使用drawImage),但是开发者控制台会对此进行警告resource interpreted asimage but transferred with MIME type image/svg+xml。
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日
现在,您可以 在某些(但不是全部)浏览器中*ctx.drawImage绘制具有.svg源的HTMLImageElement 。Chrome,IE11和Safari可以工作,Firefox可以解决一些错误(但每晚都修复了这些错误)。 *
ctx.drawImage
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中以供参考的相同元素。
<svg>
您还可以使用新的Path2D对象绘制SVG(字符串)路径。换句话说,您可以编写:
var path = new Path2D('M 100,100 h 50 v 50 h 50'); ctx.stroke(path);
没有任何一种本机可允许您在画布中本机使用SVG路径。您必须转换自己或使用一个库来为您做。