SVG到PNG使用javascript保留CSS

Question

這是一個很長的鏡頭，但是有人知道一個工具可以從svg輸入中導出png並保留應用於它的CSS樣式。 我使用了canvg，但輸出中的所有內容都顯示為黑色，因為樣式保存在css中而不是svg文檔的一部分。

解決方案是基於Web的，如果可能的話，我想使用javascript解決方案執行轉換客戶端。

Answer 1

更新：

我知道您使用外部樣式表作為SVG標記。 所以我認為你需要一個三步解決方案：

1. 使內聯適用於SVG標記的樣式表聲明。 這是最好的客戶端。 我現在沒有源代碼的解決方案，但應該可以使用W3C DOM Level 2 Style接口實現來找出適用於元素的選擇器，以及已在相應塊中使用的聲明（ document.defaultView.getComputedStyle()可能會導致SVG片段具有太多的內聯聲明）。
2. 將帶有內聯樣式表的SVG標記轉換為PNG。 這最好在服務器端完成（例如，使用ImageMagick），因此您需要將SVG標記發送到服務器。
3. 將PNG資源提供給用戶。

這兩個步驟可以在表單提交上執行，在onsubmit屬性中執行步驟＃1，然后調用表單的submit()方法。

Answer 2

@pluke，您已經在@PointedEars的回復評論中詢問了源代碼，以便將外部CSS樣式轉換為SVG的內聯樣式。 我自己花了幾個小時搜索這樣一個工具，但沒找到。 但是，我發現了一個非常具體的解決方案，它應用了用Rickshaw / D3生成的SVG：@thirdcreed已將JavaScript發布在：JSDOM中的Rickshaw CSS / Axes - 只需根據需要將這些D3特定選擇器調整為自定義CSS / SVG元素。