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

Question

我正在使用canvg()函数将svg转换为canvas。 如果我们直接在onload上使用canvg()，它将把所有svg都转换为canvas。 我想要将与特定div相关的svg转换。

<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();

这里需要将与id为apply的div相关的svg转换。 点此查看演示。

- Shrinivas Pai

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/

- ischenkodv

Answer 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>

- Robert Longson

---

感谢您的快速回复。如果我们在该div中有多个svg，那么这将无法工作。http://jsfiddle.net/L3hondLn/123/ - Shrinivas Pai

在循环中对它们进行序列化 - Robert Longson

@GennadyDogaev 谢谢您的回复，但它并没有将 SVG 转换为画布。 - Shrinivas Pai