Belirli bir div için canvg() işlevi nasıl uygulanır?

Question

svg dosyasını canvas ürününe dönüştürmek için canvg() işlevini kullanıyorum. canvg()'u doğrudan onload üzerinde kullanırsak, svg'u canvas'a dönüştürür. div ile ilgili svg dönüştürmek istedim.

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> 

Senaryo İşte

canvg(); 

o id=apply yaşıyor div ilgili svg dönüştürmek gerekir.

Fiddle demo here

Answer 1

Ben canvg kendisi kaynak kodunda sorunuza bir cevap bulduk seçiciden SVG'yi seçmek için:

Burada örnek olarak değiştirilmişsiniz: http://jsfiddle.net/ischenkodv/L3hondLn/135/

Answer 2

Sen canvg göndermek istediğiniz SVG seri hale getirmek için XMLSerializer kullanabilirsiniz. Sen sorgusunu değiştirmek gerekir canvg

: belki böyle

şey ...

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>