Wie canvg() Funktion für bestimmte div anzuwenden?

Question

Ich verwende canvg() Funktion, um svg in canvas zu konvertieren. Wenn wir canvg() direkt auf onload verwenden, werden alle svg in canvas konvertiert. Ich wollte svg bezogen auf bestimmte div konvertieren.

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> 

Script

canvg(); 

Hier sollte es svg-div Zusammenhang umwandeln, die id=apply aufweist, ist.

Fiddle demo here

Answer 1

Ich habe eine Antwort auf Ihre Frage in den Quellcode canvg selbst gefunden Wählen Sie SVG von Ihrem div:

// 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); 
} 

Hier ist Ihr Beispiel geändert: http://jsfiddle.net/ischenkodv/L3hondLn/135/

Answer 2

Sie können XMLSerializer verwenden, um die SVG Sie canvg senden möchten serialisiert. canvg

Sie Abfrage ändern müssen:

So etwas wie dies vielleicht ...

canvg("canvas", (new XMLSerializer).serializeToString(document.getElementById("apply").firstElementChild));

<script src="https://gabelerner.github.io/canvg/canvg.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>