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

我的程序动态生成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。

库做你想要的

从导言文本中：

canvg是一个SVG解析器和渲染器。它获取SVG文件的URL或SVG文件的文本，用JavaScript解析，并在画布元素上呈现结果。示例的渲染速度大约与本机SVG一样快

---

我不久前使用过它，发现它使用简单可靠。

谢谢。我下一步就要去那里了，但我一直希望有更简单的事情。没问题。是的，一些简单的东西会很好，但我不知道没有库或等效的大量代码的任何方法。canvg对于简单的事情来说是可以的，但请记住，它要求所有影响SVG的CSS都是内联的，否则它将被忽略（至少在我上次使用它时是这样）。我想这是有道理的。对我来说没问题。在您的情况下，它可能不起作用，但您可以始终将SVG分层到画布的顶部，只要不需要在SVG元素的下方和上方绘制。我相信你已经考虑过了。另外，在我开始之前，很高兴知道它的使用简单可靠。您知道它是否支持在其他SVG中定义的url引用到DEF（例如线性渐变）？您是否知道它是否可能在较旧的浏览器上工作（例如UIwebview中的mobile safari？）请阅读fabricjsOnly，我在代码中看到的唯一错误是xlink命名空间解析器。但你甚至不需要这个属性，所以不要设置它。事实上，即使有这个错误，你的第一次尝试在我的FF和Android上的chrome上都可以正常工作。你用什么浏览器？Chrome来测试这很令人费解。我现在已经尝试了我的第一次尝试，它的工作。很抱歉浪费了你的时间。关于您提到的错误，我是否要删除该行代码或xlink参数？