SVG到PNG使用javascript保留CSS

Question

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.

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

Answer 1

Update:

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

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 (eg, with ImageMagick), so you would need to send the SVG markup to the server.
3. Serve the PNG resource to the user.

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.

Answer 2

@pluke, you've asked in the comments of the reply of @PointedEars for source code to turn external CSS styling into inline styles for your SVG. I've spent hours of searching for such a tool myself, and found none. However, I've discovered a quite specific solution that applies SVG generated with Rickshaw / D3: @thirdcreed has posted the JavaScript it at: Rickshaw CSS/Axes in JSDOM - just adapt those D3 specific selectors to your custom CSS / SVG elements as needed.