SVG到PNG使用javascript保留CSS

Question

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

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

Answer 1

更新：

我知道您使用外部样式表作为SVG标记。 所以我认为你需要一个三步解决方案：

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

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

Answer 2

@pluke，您已经在@PointedEars的回复评论中询问了源代码，以便将外部CSS样式转换为SVG的内联样式。 我自己花了几个小时搜索这样一个工具，但没找到。 但是，我发现了一个非常具体的解决方案，它应用了用Rickshaw / D3生成的SVG：@thirdcreed已将JavaScript发布在：JSDOM中的Rickshaw CSS / Axes - 只需根据需要将这些D3特定选择器调整为自定义CSS / SVG元素。