SVG到PNG使用javascript保留CSS [英] SVG to PNG retaining CSS using javascript

问题描述

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

This is a bit of a long shot, but does anyone know of a tool that can export a png from an svg input AND retain the CSS styles applied to it. I have used canvg, but everything appears black in the output, as the styles are kept in css and not part of the svg document.

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

The solution is web based, and i'd like to perform the conversion client side using a javascript solution if possible.

推荐答案

>

Update:

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

I understand that you are using an external stylesheet for your SVG markup. So I think you need a three-step solution:

1. 创建适用于SVG标记的样式表声明。这是最好的客户端。我现在没有解决方案的源代码，但应该可以使用 W3C DOM Level 2 Style 接口实现来找出适用于元素的选择器，以及在相应块中使用的声明（ document.defaultView.getComputedStyle（）单独可能会导致SVG片段具有太多的内联声明。


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


3. 向用户提供PNG资源。

1. Make the stylesheet declarations that apply to the SVG markup inline. This is done best client-side. I do not have a solution in source code right now, but it should be possible to use W3C DOM Level 2 Style interface implementations to find out the selectors that apply to an element, and the declarations that have been used in the corresponding blocks (document.defaultView.getComputedStyle() alone will probably result in an SVG fragment having too many inline declarations).
2. Convert SVG markup with inline stylesheets to PNG. This is best done server-side (e. g., with ImageMagick), so you would need to send the SVG markup to the server.
3. Serve the PNG resource to the user.

这两个步骤可以在表单提交上执行，在 onsubmit 1，然后调用表单的 submit（）方法。

Those two steps could be performed on form submission where in the onsubmit attribute you do step #1 and then call the form's submit() method.

这篇关于SVG到PNG使用javascript保留CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！