將嵌入式CSS的SVG轉換爲Python中的PDF

我試圖從使用Python的SVG圖像生成PDF圖像。我試過CairoSVG和svglib。問題是，在這兩種情況下，生成的PDF都沒有應用任何嵌入的CSS樣式。將嵌入式CSS的SVG轉換爲Python中的PDF

這裏是一個應該呈現藍色的長方形黑色的邊框一個簡單的SVG文件：

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <style type="text/css"><![CDATA[ 
     rect { 
     fill: #1f77b4; 
     stroke: black; 
     stroke-width: 1; 
     shape-rendering: crispEdges; 
     } 
    ]]></style> 
    </defs> 
    <rect x="50" y="50" width="100" height="100"></rect> 
</svg>

渲染時使用CairoSVG這個SVG的PDF，PDF格式的圖像呈現爲黑色矩形。使用svglib，沒有筆畫或樣式應用於矩形，因此不可見。有沒有人知道一種方法將SVG 與CSS樣式轉換爲Python中的PDF圖像？

來源

2013-02-15 jrothenbuhler

我必須做出對D3可視化縮略圖，到目前爲止，我想出最好是使用phantomjs呈現SVG有點令人費解的設置。由於phantomjs是一個真正的webkit瀏覽器，所以SVG的渲染與瀏覽器版本完全相同（有一個幻影模塊，但它在我的環境中存在缺陷，我沒有時間調查原因）。 – 2013-07-22 15:37:32

的CairoSVG文檔中有這樣一個字條：CairoSVG可以使用LXML解析SVG文件，tinycss加cssselect申請不包括在標籤的樣式屬性CSS。如果這些軟件包不可用，CSS將只在樣式屬性中受支持。如果你安裝tinycss和cssselect軟件包，它可能會解決你的問題。看到這裏的依賴關係部分：http://cairosvg.org/user_documentation/ – MonkeyWrench 2013-07-26 19:16:26

@MonkeyWrench：這是迄今爲止最好的提示，如果你關心你可以做出答案並收集獎金。 – 2013-07-28 00:46:58

（從@MonkeyWrench的幫助，因爲他並沒有張貼一個答案。）

按照documentation，

CairoSVG可以使用LXML解析SVG文件，tinycss加cssselect應用未包含在標籤樣式屬性中的CSS。如果這些軟件包不可用，CSS將只在樣式屬性中受支持。

要開始，我安裝了所有的依賴關係，

$ pip3 install cairosvg lxml tinycss cssselect

然後創建image.svg具有以下內容：

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <style type="text/css"><![CDATA[ 
     rect { 
     fill: #1f77b4; 
     stroke: black; 
     stroke-width: 1; 
     shape-rendering: crispEdges; 
     } 
    ]]></style> 
    </defs> 
    <rect x="50" y="50" width="100" height="100"></rect> 
</svg>

最後，我執行cairosvg

$ cairosvg image.svg -o image.pdf

果然，這是一個藍色的ctangle。

blue

來源

2013-07-28 20:41:03

有例子，給了功勞，一切都檢查。幹得不錯，收集你的賞金。 :-) – 2013-07-29 00:42:12

很高興它解決了。已經離開了一段時間。更好地保持未來。 – MonkeyWrench 2013-09-05 23:08:29

只是爲了更好地理解解決方案 - 與使用PhantomJS相比，此方法的好處是什麼？ – pir 2015-03-21 19:52:27

您是否嘗試過使用樣式屬性？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <rect x="50" y="20" width="100" height="100" 
    style="fill:#1f77b4;stroke:black;stroke-width:1;shape-rendering: crispEdges;" 
    stroke-opacity:0.9"/> 
</svg>

它最終和你已經是一樣了，但也許CairoSVG跳過HTML中的樣式元素。

來源

2013-02-15 21:14:34 ncksllvn

這個標記由CairoSVG和svglib正確顯示。但是，我試圖將SVG圖像轉換爲在網頁上呈現。將樣式屬性應用於每個單獨的元素是不實際的。即使這不適合我的情況，這是有用的信息。那謝謝啦！ – jrothenbuhler 2013-02-21 17:54:25

我建議使用PhantomJS。

基本上它是一個無頭WebKit，由Javascript驅動。

查看rasterize.js腳本。

您可以抓取座標並將該部分導出（柵格化）爲圖像。然後，通過嵌入圖像，您可以基本上使用任何PDF生成器。或者，您可以使用其他腳本來使用PhantomJS生成PDF文件。

來源

2013-07-23 20:02:58

'rasterize.js'可以生成PDF，不需要外部生成器。 – 2013-07-24 04:47:43

將嵌入式CSS的SVG轉換爲Python中的PDF

回答

相關問題