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中时，相应的网格框应该有他们调整大小的svgs的缩略图。

在i中我只提供了第一个网格框，其中包含一个图表，其中包含一些文字 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>

从隐藏div中复制SVG以创建缩略图

1 个答案: