如何为特定的div应用canvg()函数？

Question

我正在使用canvg()函数转换svg成canvas.如果我们canvg()直接在onload上使用它将全部转换svg为canvas.我想转换svg相关的特定div.

HTML

<div id="notapply">
<svg><text x="50" y="50">Not to Apply!</text></svg>
</div>

<div id="apply">
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>

脚本

canvg();

在这里它应该转换svg相关的div具有id=apply.

小提琴演示在这里

Answer 1

我在canvg本身的源代码中找到了你的问题答案:canvg

您需要更改查询选择器以从div中选择SVG:

// Your selector here
var svgTags = document.querySelectorAll('#apply svg');

// Process SVG tags
for (var i=0; i<svgTags.length; i++) {
    var svgTag = svgTags[i];
    var c = document.createElement('canvas');
    c.width = svgTag.clientWidth;
    c.height = svgTag.clientHeight;
    svgTag.parentNode.insertBefore(c, svgTag);
    svgTag.parentNode.removeChild(svgTag);
    var div = document.createElement('div');
    div.appendChild(svgTag);
    canvg(c, div.innerHTML);
}

以下是您修改的示例:http://jsfiddle.net/ischenkodv/L3hondLn/135/