javascript - SVG 到 PNG 使用 javascript 保留 CSS

Question

这有点遥不可及，但有谁知道可以从 svg 输入导出 png 并保留应用于它的 CSS 样式的工具。我使用过 canvg，但输出中的所有内容都显示为黑色，因为样式保存在 css 中而不是 svg 文档的一部分。

该解决方案是基于网络的，如果可能，我想使用 javascript 解决方案执行转换客户端。

Answer 1

更新:

我了解到您正在为 SVG 标记使用外部样式表。所以我认为你需要一个三步解决方案:

1. 将适用于 SVG 标记的样式表声明内联。这是最好的客户端。我现在在源代码中没有解决方案，但应该可以使用 W3C DOM Level 2 Style接口(interface)实现以找出适用于元素的选择器，以及已在相应 block 中使用的声明(单独使用 document.defaultView.getComputedStyle() 可能会导致 SVG 片段具有太多内联声明)。
2. 将带有内联样式表的 SVG 标记转换为 PNG。这最好在服务器端完成(例如，使用 ImageMagick)，因此您需要将 SVG 标记发送到服务器。
3. 为用户提供 PNG 资源。

这两个步骤可以在表单提交时执行，您在 onsubmit 属性中执行步骤 #1，然后调用表单的 submit() 方法。