Come applicare la funzione canvg() per un particolare div?

Question

Sto usando la funzione canvg() per convertire svg in canvas. Se usiamo canvg() direttamente su onload, converte tutti svg in canvas. Ho voluto convertire svg relativo a div particolare.

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

Qui dovrebbe convertire svg relative al div che sta avendo id=apply.

Fiddle demo here

Answer 1

ho trovato una risposta alla tua domanda nel codice sorgente di canvg stessa: canvg

È necessario cambiare interrogazione selettore per selezionare SVG dal tuo 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); 
} 

Ecco il tuo esempio modificato: http://jsfiddle.net/ischenkodv/L3hondLn/135/

Answer 2

È possibile utilizzare XmlSerializer per serializzare l'SVG che si desidera inviare a canvg.

Qualcosa di simile, forse ...

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>