将 DIV 的所有内容转换为 SVG 缩略图答案

【问题标题】：Convert all the content of a DIV into a SVG thumbnail将 DIV 的所有内容转换为 SVG 缩略图
【发布时间】：2014-06-10 16:40:37
【问题描述】：

我有一个 web 应用程序，其中有不同 div 中的各种幻灯片。在左侧屏幕中，我列出了所有这些幻灯片作为迷你缩略图。

有没有办法将每个幻灯片 div 转换为 SVG 缩略图？

【问题讨论】：

【解决方案1】：

你可以使用html2canvas来实现你想要的。

【讨论】：

我正在使用 html2canvas，但它不适用于 CSS-Transform 属性，例如 rotate()、scale()、translate3D()（我使用的是 Impress.js）。这就是为什么我要求另一个库来创建缩略图而不是 html2canvas
@edwardoyarzun 实际上，除了 html2canvas 之外，我还没有找到任何其他库。 ://
好的，我想我的解决方案是，使用 cloneNode() 克隆 DIV 节点并将其附加到缩略图容器 div，然后使用 CSS 变换对其进行缩放。
我有一个与@Eduardo 类似的解决方案：在 iframe 中渲染 DIV 并转换 iframe。

【解决方案2】：

如果这些幻灯片是由 svg 元素描述的，你可以像这样使用“use”元素。

<!--main slide-->
<div>
    <svg id="slide_1"></svg>
</div>
...
<!--thumbnail-->
<div>
    <svg><use xlink:href="#slide_1"/></svg>
    ...
</div>

【讨论】：