Làm cách nào để áp dụng hàm canvg() cho div cụ thể?

Question

Tôi đang sử dụng chức năng canvg() để chuyển đổi svg thành canvas. Nếu chúng tôi sử dụng trực tiếp canvg() khi tải, nó sẽ chuyển đổi tất cả svg thành canvas. Tôi muốn chuyển đổi svg liên quan đến cụ thể 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> 

Script

canvg(); 

Ở đây nó nên chuyển đổi svg liên quan đến div mà là có id=apply.

Fiddle demo here

Answer 1

Tôi đã tìm thấy một câu trả lời về câu hỏi của bạn trong mã nguồn của canvg bản thân: canvg

Bạn cần thay đổi truy vấn công cụ chọn để chọn SVG từ div của bạn:

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

Đây là ví dụ của bạn đã sửa đổi: http://jsfiddle.net/ischenkodv/L3hondLn/135/

Answer 2

Bạn có thể sử dụng XmlSerializer để tuần tự hóa đối SVG bạn muốn gửi đến canvg.

Something như thế này có lẽ ...

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>