SVG到PNG使用javascript保留CSS

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

---

该解决方案基于web，如果可能的话，我希望使用javascript解决方案在客户端执行转换。

更新：

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

使应用于SVG标记的样式表声明内联。这是最好的客户端。我现在没有源代码中的解决方案，但应该可以使用接口实现来查找应用于元素的选择器，以及在相应块中使用的声明（

document.defaultView.getComputedStyle（）

单独使用可能会导致SVG片段包含太多的内联声明）

将带有内联样式表的SVG标记转换为PNG。这最好在服务器端完成（例如，使用ImageMagick），因此您需要将SVG标记发送到服务器

为用户提供PNG资源

---

这两个步骤可以在表单提交时执行，在

onsubmit

属性中执行步骤1，然后调用表单的

submit（）

方法。

@pluke，您在@PointedEars的回复中要求源代码将外部CSS样式转换为SVG的内联样式。我自己花了几个小时寻找这样一个工具，却一个也没有找到。然而，我发现了一个应用Rickshaw/D3生成的SVG的非常具体的解决方案：@thirdcreed已将JavaScript发布在：-只需根据需要将这些D3特定的选择器调整为自定义CSS/SVG元素。

可能会起作用，尽管我还没有深入研究。Hi@JamWaffles可能会让它更清晰，我希望在客户端javascript中实现这一点，因为这是一个基于web的解决方案。看看Inkscape是否允许这种输出，然后看看你是否可以链接到库服务器sideNo，你做得很好-我没有读你的标签！不幸的是，如果没有浏览器扩展，您无法链接到可执行文件（命令行Inkscape）甚至库，因此您必须在服务器上执行此操作。有，这可能会有一些启示。它已关闭，但其中有一些有用的链接。使用，您可以在画布上显示SVG内容，然后通过本机

HtmlCanvaElement:：toDataURL

方法获取图片。@kangax这种方法需要支持画布，“数据：”URI和长度不限的URI，它们不可互操作。Hi@PointedEars，一点背景：我正在将SVG嵌入一个网站，供人们操作，并希望用户能够导出光栅文件供个人使用（将SVG转换为png，并显示它，以便他们可以右键单击并另存为）。当我使用多个SVG文件时，我有一个CSS文件作为样式信息。原始SVG没有任何颜色信息，这是通过动态更改附加到SVG的类来应用的。理想的情况是有一个javascript工具，允许SVG->PNG，同时保留应用的CSS。希望这有道理。对不起，我没有仔细阅读你的问题。请看我的最新答案。这看起来可以解决问题。我将尝试将一些东西组合起来，应用各种CSS内联规则对SVG结构进行爬网，然后将其传递给canvg。服务器端的东西越少越好。谢谢这已经有一段时间了，但是有没有可用的源代码？正如@Travis早些时候指出的，任何源代码或示例都会非常有用。这并不能回答这个问题。若要评论或要求作者澄清，请在其帖子下方留下评论-您可以随时对自己的帖子发表评论，一旦有足够的评论，您就可以发表评论。@antyrat为澄清而编辑。