有没有办法在HTML5画布上呈现SVG对象？

Question

我的程序动态生成 SVG 对象，我可以通过将它们添加到 DOM 来可视化它们。

我也想在 HTML5 画布上绘制它们，但尽管在网络上搜索失败，但到目前为止还是失败了。对绘制实际源文件的 SVG 的支持很丰富，但就我目前所能找到的而言，不支持动态创建的 SVG。

我的尝试如下代码所示：

// dynamically create an svg containing a black circle
var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS (svgns, "svg");
svg.setAttribute ( "width"  , "128" );
svg.setAttribute ( "height" , "128" );
svg.setAttributeNS ("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");

shape = document.createElementNS (svgns, "circle"); 
svg.appendChild (shape);
shape.setAttribute ( "cx", 64);
shape.setAttribute ( "cy", 64);
shape.setAttribute ( "r",  50);
shape.setAttribute ( "fill", "black");

// add the svg to the DOM
document.body.appendChild (svg); // works

// create a canvas to render the black circle
var canvas = document.createElement ("canvas"); 
document.body.appendChild (canvas);
canvas.width = 300 ; canvas.height = 150 ;
var ctx = canvas.getContext ("2d");
// create an image to contain the svg data
var img = new Image ();
img.onload = function () { ctx.drawImage (this,10,10) }; 

// ATTEMPT 1

var svgURL = new XMLSerializer().serializeToString (svg);
img.src = "data:image/svg+xml; charset=utf8," + encodeURIComponent (svgURL);  // does not work

// ATTEMPT 2

var xml = (new XMLSerializer()).serializeToString (svg);
img.src = "data:image/svg+xml;base64," + btoa (xml); //  also does not work

// ATTEMPT 3

var hiddenDiv = document.createElement("div"); 
hiddenDiv.appendChild (svg.cloneNode(true));
img.src = "data:image/svg+xml;base64," + window.btoa (hiddenDiv.innerHTML); // also deos not work

顺便问一下，如果你问为什么不直接将对象绘制到画布上而不是创建 SVG，那是我也想在 DOM 中使用 svg。

Answer 1

canvg 库可以满足您的需求。

来自介绍文字：

canvg 是一个 SVG 解析器和渲染器。它获取 SVG 文件的 URL 或 SVG 文件的文本，在 JavaScript 中对其进行解析，然后在 Canvas 元素上呈现结果。示例的渲染速度与原生 SVG 差不多。

我之前使用过它，发现它简单易用且可靠。