SVGを隠しdivの中からコピーしてサムネイルを作成する

Question

私はいくつかのチャートをレンダリングしているページがあります。これらは融合図です。私は各グリッドボックスがクリック可能なグリッドレイアウトを持っており、クリックするとグラフがレンダリングされるdivが表示されます。デフォルトではこれらのdivは非表示になっていて、それぞれのアンカータグがクリックされると対応するグラフが表示されます。今私が欲しいのは、グリッドボックスは、レンダリングされているチャートのサムネイル画像のサイズを変更する必要があるということです。私はSVGをコピーしようとしているが、私は隠されたdivからコンテンツをコピーすることができないようだから私は傾ける。以下は、私が主に興味を持ってコードの一部である。

$("#testButton").on('click',function(){ 
    var testDiv = $("#chart-container").clone(); 
    console.log($(testDiv.html())) 
    var testSvg = $(testDiv.html()).find('svg').clone(); 

testSvg.appendTo($("#testDiv")) 
}) 

あなたは上記のコードに気付いた場合のdiv $("#chart-container")が表示されている場合にのみ、それは動作します。さもなければ、私はsvg要素をコピーすることができません。私が望むのは、チャートが隠しdivにロードされるとき、対応するグリッドボックスは、サイズ変更されたsvgのサムネイルを持つ必要があるということです。

私が提供しているのは、最初のグリッドボックスには、一部のテキストが含まれている図表https://jsfiddle.net/nyb4v4og/が含まれています。

すべてのヘルプはあなたがdiv要素ではなく、DIVのHTMLコンテンツにfindを使用する必要があります

Answer 1

をいただければ幸いです。 お試しvar testSvg = $(testDiv).find('svg').clone(); とにかくsvgをクローンする場合は、グラフの内容を複製する必要はありません。

$("#testButton").on('click',function(){ 
 
    var testSvg = $("#contents").find('svg').clone(); 
 
    testSvg.appendTo($("#target")) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hidden-source" style="display:none;"> 
 
\t <div id="contents"> 
 
\t \t <svg width="100" height="40"><text x="10" y="25">Test</text></svg> 
 
\t </div> 
 
</div> 
 

 
<div id="target"></div> 
 
<div id="testButton">Test button</div>