2017-12-27 823 views
1

我的任務是製作一個程序,該程序將使用輸入數據所要求的數字生成一個PDF文件。在這張圖片中,我們可以看到輸入數據的大小,形狀之間的差距,形狀的類型,藍圖的編號。等等,並且低於實際圖表的樣子。保持html頁面內svg的大小

input data above and actual graphics below

這是非常重要的項目,使用矢量圖形,所以我想過使用SVGs因爲他們真的很靈活,這是比較容易編程生成它們。 然後,我正在使用一個.NET庫(Select.HtmltoPdf)將HTML字符串轉換爲PDF,這非常方便,因爲直接在C#中設計PDF是兩腿之間的痛苦。 使用HTML使我可以使用CSS和我比較熟悉的東西。唯一的缺點是我無法直接使用該庫來渲染svgs,我必須先將它們放入一個html文件中。

當我將SVG插入到HTML中,然後使用庫將其呈現爲PDF時,就會出現問題。 如果我直接在說Corel Draw或Adobe Illustrator中打開svg,尺寸會保留,並且所有內容都應該如此。但是,如果我將該文件的擴展名更改爲.html並在Chrome中打開它,然後打印爲PDF或直接從我的程序渲染PDF,則形狀會略微縮小。

我的問題是如何在html頁面中顯示它們時保持路徑的尺寸不變。

這裏是我當前的.svg:

<svg x="0" y="0" width="215.9mm" height="279.4mm" viewBox="0 0 215.9 279.4"> 
<rect x="40" y="40" width="25" height="25" rx="1.5875" ry="1.5875" stroke="black" stroke-width="0.5" fill-opacity="1"/> 
<ellipse cx="20" cy="20" rx="20" ry="20" stroke="black" stroke-width="0.5" fill-opacity="0"/> 
</svg> 

而且我嘗試使用HTML,這是基本相同的SVG與周圍<html>標籤。

<!DOCTYPE html> 
 
<html> 
 
<meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css" CHARSET="UTF-8"/> 
 
<svg x="0" y="0" width="215.9mm" height="279.4mm" viewBox="0 0 215.9 279.4"> 
 
<rect x="40" y="40" width="25" height="25" rx="1.5875" ry="1.5875" stroke="black" stroke-width="0.5" fill-opacity="1"/> 
 
<ellipse cx="20" cy="20" rx="20" ry="20" stroke="black" stroke-width="0.5" fill-opacity="0"/> 
 
</svg> 
 
</html>

謝謝!

回答

1

這實際上並不清楚你的意思是「形狀稍微縮小」。

但是,您的問題可能與CSS中的「215.9mm」並不意味着與真實世界215.9mm相同。 CSS值「1in」(或「25.4mm」)被定義爲等於96「CSS像素」。由瀏覽器決定在屏幕上顯示的大小或打印的大小。

當SVG嵌入到HTML中時,瀏覽器正在決定HTML頁面中「215.9mm」代表的內容以及由此生成的PDF。另外不要忘記,它也可能決定調整其HTML頁面的想法以適應它認爲的打印機頁面大小。

當您的矢量軟件生成PDF時,我期望它能夠根據您的PDF大小(無論是A4還是其他),使用這些長度值的更準確的表示。