使用JavaScript将带有CSS的SVG转换为PNG

Question

这可能有点难度，但是你是否知道有什么工具可以从svg输入中导出png并保留应用的CSS样式？我已经尝试了canvg，但输出结果中的所有东西都是黑色的，因为样式保存在css中而不是svg文档的一部分。

解决方案是基于web平台的，如果可能的话，我希望通过客户端使用javascript实现转换。

- pluke

---

Inksape的命令行实用程序可能有效，尽管我还没有深入研究过。 - Bojangles

嗨@JamWaffles，可能应该更清楚地说明一下，我想在客户端JavaScript中实现这个目标，因为这是一个基于Web的解决方案。看看Inkscape是否允许这种输出方式会很有趣，然后再看看是否可以将其链接到服务器端库。 - pluke

不，你做得很好 - 我没有读你的标签！不幸的是，你不能链接到可执行文件（命令行Inkscape）或者甚至是库，除非使用浏览器扩展程序，所以你必须在服务器上完成这个操作。 这个问题或许会有所启示。它已经关闭了，但里面有一些有用的链接。 - Bojangles

使用 fabric.js，您可以在画布上显示 SVG 内容，然后通过本地 HTMLCanvasElement::toDataURL 方法获取图片。 - kangax

@kangax 那种方法需要支持Canvas、"data:" URI和长度无限的URI，这些都不是互操作的。 - PointedEars

Answer 1

更新：

我了解到您正在使用外部样式表来处理SVG标记。因此，我认为您需要三个步骤的解决方案：

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

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

- PointedEars

---

嗨@PointedEars，一些背景信息：我正在将SVG嵌入网站供人们操作，并希望让用户能够导出光栅文件以供个人使用（将SVG转换为png，并显示它，以便他们右键单击并另存为）。由于我正在使用多个SVG文件，因此有一个CSS文件用于样式信息。原始的SVG没有任何颜色信息，这是通过动态更改附加到SVG的类来应用的。理想情况下，应该有一个JavaScript工具，可以在保留应用的CSS的同时进行SVG-> PNG转换。希望这有意义。 - pluke

抱歉，我没有仔细阅读你的问题。请查看我的更新回答。 - PointedEars

这看起来能做到。我会尝试写一个程序，用于遍历SVG结构并应用各种CSS规则，然后将其传递给canvg。服务器端的操作越少越好。谢谢！ - pluke

有一段时间了，但是这个有没有可用的源代码呢？ - Travis

正如@Travis之前指出的那样，任何关于此的源代码或示例都将非常有帮助。 - amergin

很遗憾，我被调到了另一个项目，希望有其他人能够看一下这个问题... - pluke

Answer 2

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

- HumanInDisguise

---

这并没有提供问题的答案。如果要批评或请求作者澄清，请在他们的帖子下留言 - 您始终可以评论自己的帖子，一旦您拥有足够的[声望]（http://stackoverflow.com/help/whats-reputation），您将能够[在任何帖子上发表评论](http://stackoverflow.com/help/privileges/comment)。 - antyrat

@antyrat 编辑以澄清。 - HumanInDisguise