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中使用svgs。

Answer 1

canvg库可以完成您之后的工作。

从简介文字：

canvg是一个SVG解析器和渲染器。它需要一个SVG文件的URL或SVG文件的文本，用JavaScript解析它，并在Canvas元素上呈现结果。示例的渲染速度与原生SVG一样快。

我前一段时间使用它，发现它使用起来既可靠又可靠。

有没有办法在HTML5 Canvas上渲染SVG对象？

1 个答案: