SVG` <path>`不精确

Question

根据一些计算，我使用D3.js在画布上绘制数百个SVG <path>。

以下是典型SVG的片段：

<path element="true" class="generation1" d="M 0 0 H 11.276566666666668 V 10.733333333333333 H 0 L 0 0" transform="translate(90.21253333333334,0)" fill="rgb(153, 126, 0)" stroke-width="1" stroke="rgb(153, 126, 0)" style="opacity: 1;"></path><path element="true" class="generation1" d="M 0 0 H 11.276566666666668 V 10.733333333333333 H 0 L 0 0" transform="translate(112.76566666666668,0)" fill="rgb(153, 126, 0)" stroke-width="1" stroke="rgb(153, 126, 0)" style="opacity: 1;"></path><path element="true" class="generation1" d="M 11.276566666666668 10.733333333333333 L 11.276566666666668 5.366666666666666 L 0 5.366666666666666 L 0 10.733333333333333 Z" transform="translate(157.87193333333335,0)" fill="rgb(153, 126, 0)" stroke-width="1" stroke="rgb(153, 126, 0)" style="opacity: 1;"></path><path element="true" class="generation1" d="M 11.276566666666668 10.733333333333333 h -11.276566666666668 L 11.276566666666668 0 Z" transform="translate(180.42506666666668,0)" fill="rgb(153, 126, 0)" stroke-width="1" stroke="rgb(153, 126, 0)" style="opacity: 1;"></path>

当我不给每个<path>一个相同颜色的笔划时，形状之间有许多很小的间隙。但是，当我添加笔划时，会出现其他缺陷，如下所示。

有些角落不符合，形状从错误的地方开始并最终被其他人覆盖，背景显示的间隙或错误的形状可见，等等。在某些缩放级别，差异更严重。

我似乎遇到了here描述的问题版本，其中回答者说问题在于抗锯齿。回答者建议添加shape-rendering: crispEdges，但这实际上使我的问题更加严重，并且不满足该问题的提问者。添加笔划可以消除<path>之间的大部分但不是全部的间隙，但同样会导致其他问题。

我也试过shape-rendering: geometricPrecision，但这没有用。

如何在不产生额外差异的情况下消除形状之间的差距？

Answer 1

好吧，它似乎并不像这里真的是一个很好的解决方案。

我意识到，stroke-width的值可以小于1.所以我玩了不同的分数，直到形状之间的大部分间隙被覆盖，但其他扭曲被保持在最低限度。

我降落在stroke-width: .5。

如果有人找到别的东西，我很乐意接受。