在HTML5画布上绘制SVG文件

在HTML5画布上绘制SVG文件有默认方法吗？Google Chrome支持将SVG作为图像加载（并且只需使用

drawImage

），但开发人员控制台确实警告

资源被解释为图像，但使用MIME类型图像/SVG+xml

传输

我知道有可能将SVG转换为画布命令（如中所示），但我希望这不是必需的。我不在乎老版本的浏览器（所以如果Firefox4和IE9支持一些东西，那就足够了）。

编辑2019年12月16日 所有主要浏览器都支持Path2D

2014年11月5日编辑 现在，您可以使用

ctx.drawImage

在一些但不是所有浏览器中绘制具有.svg源代码的HTMLImage元素。Chrome、IE11和Safari都可以使用，Firefox也可以使用一些bug（但夜间已经修复了它们）

。你应该在画布上看到一个绿色的正方形。页面上的第二个绿色方框与插入DOM中供参考的

元素相同

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

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

---

老后人回答： 没有任何本机允许您在画布中本机使用SVG路径。您必须转换自己或使用库为您转换

我建议去看canvg：

---

正如Simon所说，使用drawImage不应该起作用。但是，使用图书馆和：

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

Mozilla有一种在画布上绘制SVG的简单方法，称为“

您可以通过以下方式轻松地在画布上绘制简单的

SVG

s：

将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='数据：image/svg+xml；base64'；
//在“标题”前面加上前缀
var image64=b64Start+svg64；
//将其设置为img元素的源
img.src=image64；
//将图像绘制到画布上
canvas.getContext（'2d'）.drawImage（img，0，0）
svg、img、canvas{
显示：块；
}
SVG


形象


帆布

对不起，我没有足够的声誉来评论@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='数据：image/svg+xml；base64'；
//在“标题”前面加上前缀
var image64=b64Start+svg64；
//将其设置为img元素的源
img.onload=函数（）{
//将图像绘制到画布上
canvas.getContext（'2d'）.drawImage（img，0，0）；
}
img.src=image64
svg、img、canvas{
显示：块；
}
SVG


形象


帆布

为什么需要这样做？SVG似乎只需
drawImage
就可以完美地在canvase上绘制。但我还是得到了警告。这是从哪里来的？西蒙，你说的不对。其次，这是Chrome中的一个确认错误。Wikimedia似乎不喜欢你使用SVG。我作为找到的第一个可用SVG进行了交换。在FF工作。您还可以使用：注意：由于FireFox存在一个长期存在的Bug，很遗憾，缺少宽度和高度标记的SVG根本不会在画布上呈现。另外，宽度和高度不能用百分比表示。这个问题的答案是通过一个现场演示的。这个问题与@Simon的第一个方法有相同的缺点：在Firefox中不起作用，Chrome OK。你的链接不再起作用。我仍然对Mozilla感兴趣way@Alirezak这可能就是链接：是否有任何方法可以解决您提到的问题。图像嵌入svg。对不起，我还没有找到解决嵌入图像问题的方法。好的。感谢Matyas:）字体也是一样，它们需要嵌入到SVG中：您可以在
SVG
中迭代
img
标记，然后在画布上单独绘制图像。
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);