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

Question

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

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

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

我想HTML table在SVG. 这里有什么问题？

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 元素中使用相同的宽度/高度值。

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