模糊的字體，線條在動態生成SVG到畫布

Question

我有一個代碼什麼可以從HTML表生成SVG圖像。 JSFiddle link.

生成的問題image：每個元素都模糊不清，就像放大圖像一樣。

我試圖改變字體大小，使用pt，em或px ...試圖改變表的寬度和高度...相同的結果。

我想看到我的HTMLtable 1：1 SVG。這裏有什麼問題？

Answer 1

這段代碼有兩個問題。

首先是根據需要動態縮放畫布。當縮放畫布時，您也在縮放畫布的2dcontext區域中的像素，並且它們不像html或svg那樣縮放;它們像一個由像素組成的圖像一樣縮放。這是模糊的原因。

第二個問題被第一個問題掩蓋;您正在創建的svg文檔並不知道如何自動調整大小，因此將svg元素的寬度和高度設置爲100％不會執行任何操作。所以，我的建議：

1. 創建於jQuery的飛canvas標籤，並與寬度創建和height屬性設置爲表的邊界框的寬度。在之前調整canvas元素的代碼中執行此操作。最簡單的方法是用一個div來代替畫布元素：

   <div id="canvasy"></div> 
   

   然後，動態canvas元素添加到它：

   $('#canvasy').append('<canvas id="canvas" width="'+($(id).width()+5)+'" height="'+($(id).height()+5)+'"></canvas>'); 
   

2. 當您生成SVG，使用svg元素中的寬度/高度值相同。

這裏有一個working version of your fiddle