9

にcanvg()変換する関数を使用svgしてcanvasいます。canvg()onload で直接使用すると、すべてが に変換svgされcanvasます。svg特定の に関連して変換したかった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>

脚本

canvg();

ここでは、 which が を持っていることにsvg関連して変換する必要があります。divid=apply

フィドルのデモはこちら

4

2 に答える 2

9

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/

于 2015-09-14T20:15:26.370 に答える
3

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>

于 2015-09-02T15:01:10.920 に答える