我正在使用canvg()
函数将svg
转换为canvas
。
如果我们直接在onload上使用canvg()
,则会将所有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
。
答案 0 :(得分:8)
我在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);
}
答案 1 :(得分:2)
您可以使用XMLSerializer序列化要发送给canvg的SVG。
这样的事可能......
canvg("canvas", (new XMLSerializer).serializeToString(document.getElementById("apply").firstElementChild));
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.5/canvg.min.js"></script>
<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>
<canvas id="canvas" width="500" height="500"></canvas>