SVG到PNG保留CSS使用javascript

SVG to PNG retaining CSS using javascript

本文关键字：使用 javascript CSS 保留 PNG SVG      更新时间：2023-09-26

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

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

更新:

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

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

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

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

相关文章：