从隐藏的Div内部复制SVG以创建缩略图

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元素。我想要的是，当图表被加载到隐藏的divs中时，相应的网格盒应具有其调整大小SVG的缩略图。

在我只提供了第一个网格框中包含图表reban包含一些文本 https://jsfiddle.net/nyb4v4og/。

任何帮助都将不胜感激

Answer 1

您应该在DIV上使用find，而不是DIV的HTML内容。尝试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;">
	<div id="contents">
		<svg width="100" height="40"><text x="10" y="25">Test</text></svg>
	</div>
</div>
<div id="target"></div>
<div id="testButton">Test button</div>