字体模糊，线条在画布上生成SVG

Question

我有一个代码，可以从HTML表生成SVG图像。JSFiddle链接。

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

我试图更改字体大小，使用pt、em或px。。。试着改变桌子的宽度和高度。。。同样的结果。

我想在SVG中看到我的HTMLtable1: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元素中使用相同的宽度/高度值。

这是你的小提琴的工作版本