如何在画布上绘制内嵌svg（在DOM中）？

3回答

三国纷争

对于嵌入式SVG，您需要：将SVG字符串转换为 Blob获取Blob的URL创建图像元素并将URL设置为 src加载（onload）后，您可以将SVG绘制为画布上的图像用于toDataURL()从画布获取PNG文件。例如：function drawInlineSVG(ctx, rawSVG, callback) {    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),        domURL = self.URL || self.webkitURL || self,        url = domURL.createObjectURL(svg),        img = new Image;    img.onload = function () {        ctx.drawImage(this, 0, 0);             domURL.revokeObjectURL(url);        callback(this);    };    img.src = url;}// usage:drawInlineSVG(ctxt, svgText, function() {    console.log(canvas.toDataURL());  // -> PNG data-uri});当然，此处的console.log仅作为示例。请在此处存储/传输字符串。（我也建议onerror在方法内部添加一个处理程序）。另外，请记住使用width和height属性设置画布大小，或者使用属性从JavaScript 设置画布大小。

慕工程0101907

我很久以后才提出这个问题，因为接受的答案可能会产生不良行为。@ K3N解决方案几乎是正确的，但我反对使用svgElement.outerHTML。相反，应该更喜欢new XMLSerializer().serializeToString(svgElement)。同样，也不需要使用Blob和URL API，并且简单的dataURI在浏览器中具有更大的兼容性。这样的完整版本是：function drawInlineSVG(svgElement, ctx, callback){  var svgURL = new XMLSerializer().serializeToString(svgElement);  var img  = new Image();  img.onload = function(){    ctx.drawImage(this, 0,0);    callback();    }  img.src = 'data:image/svg+xml; charset=utf8, '+encodeURIComponent(svgURL);  }//usage :drawInlineSVG(document.querySelector('svg'), ctxt, function(){console.log(canvas.toDataURL())})

长风秋雁

这不是CORS问题。一些UA在画布上绘制某些svg元素时具有安全限制。这在哪个浏览器上发生？如果IE <Edge，则所有svg都会污染画布。唯一的解决方法：使用画布绘制方法重现svg（这是canvg之类的库所执行的操作）。对于其他UA，您的svg中可能有一个foreignObject元素。不幸的是，Safari和chrome在某些情况下并不真正喜欢它，除了删除此元素或将其替换为ots内容上的html2canvas结果之外，没有其他解决方法。