动态生成的 SVG 中的模糊字体、线条到画布中

Question

我有一个代码可以从HTML 表生成SVG 图像。 JSFiddle link.

生成的image 存在问题：每个元素都是模糊的，就像你放大图像一样。

我尝试更改字体大小，使用pt、em 或px...尝试更改表格的宽度和高度...同样的结果。

我想在SVG 中看到我的HTML table 1:1。这里有什么问题？

Answer 1

这段代码有两个问题。

首先是您根据需要动态缩放画布。当您缩放画布时，您也在缩放画布的 2dcontext 区域中的像素，它们不会像 html 或 svg 那样缩放；它们像由像素组成的图像一样缩放。这就是模糊的原因。

第二个问题被第一个问题掩盖了；您正在创建的 svg 文档不知道如何自动调整大小，因此将 svg 元素的宽度和高度设置为 100% 没有任何作用。所以，我的建议：

1. 在 jQuery 中动态创建画布标签，并将其宽度和高度属性设置为表格边框框的宽度。在您之前调整画布元素大小的代码中执行此操作。最简单的方法是用 div 替换 canvas 元素：

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

   然后，像这样动态地将画布元素附加到它：

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

2. 构建 svg 时，在 svg 元素中使用相同的宽度/高度值。

这是working version of your fiddle