在HTML5画布上绘制SVG文件

是否有将SVG文件绘制到HTML5画布上的默认方式？谷歌浏览器支持将SVG加载为图像(并简单地使用drawImage),但开发人员控制台确实警告过resource interpreted as image but transferred with MIME type image/svg+xml.

我知道有可能将SVG转换为canvas命令(比如这个问题),但我希望不需要.我不关心旧的浏览器(所以如果FireFox 4和IE 9支持某些东西,那就足够了).

您现在可以使用在某些但不是所有浏览器中ctx.drawImage绘制具有.svg源的HTMLImageElements .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";

这里有实例.你应该在画布上看到一个绿色方块.页面上的第二个绿色方块是插入DOM中的相同元素以供参考.

您还可以使用新的Path2D对象绘制SVG(字符串)路径(仅适用于Chrome).换句话说,你可以写:

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

这里的实例.

老后人回答:

没有任何本机允许您在画布中本机使用SVG路径.您必须转换自己或使用库为您完成.

我建议你去看看canvg:

http://code.google.com/p/canvg/

http://canvg.googlecode.com/svn/trunk/examples/index.htm

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

将svg的源分配为base64格式的图像

将图像绘制到画布上

注意:该方法唯一的反向是它无法绘制嵌入的图像svg.(见演示)

示范:

(请注意,嵌入的图像仅在其中可见svg)

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.src = image64;

// draw the image onto the canvas
canvas.getContext('2d').drawImage(img, 0, 0);

svg, img, canvas {
  display: block;
}

SVG





IMAGE



   
CANVAS

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.onload = function() {
    // draw the image onto the canvas
    canvas.getContext('2d').drawImage(img, 0, 0);
}
img.src = image64;

svg, img, canvas {
  display: block;
}

SVG





IMAGE



   
CANVAS

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);