image - Dom-to-image SVG图像元素

Question

我正在使用出色的 dom-to-image捕获 d3.js 仪表板的屏幕截图并下载为 png。

我发现它比它的竞争对手工作得更好 - CSS 传输很漂亮 - 但我遇到了一个绊脚石。

我的仪表板中有一些 SVG 图像元素:

<image x="20" y="20" width="300"height="80" 
xlink:href="image/my_image.png"/>

这些要么直接嵌入到 svg 中，要么作为模式定义，它们不会在 PNG 上呈现。

这是一个 know problem还有一个以前在 Stack Overflow 上出现过，但我一直没能找到解决方案。有什么想法吗？

Answer 1

为了将您的 svg 转换为 png。只需将您的 nodeRef 放在一个 div 中，然后在该 div 中编写您的 d3.js 组件。直接在组件上应用 nodeRef 是行不通的。