SVG到PNG使用javascript保留CSS

Question

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

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

Answer 1

<强>更新

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

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

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

Answer 2

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