SVG `<path>` 不精确
SVG `<path>` Imprecision
根据一些计算，我使用D3.js在canvas上绘制了数百个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> 一个相同颜色的笔触时，形状之间会有很多很多微小的间隙。但是，当我添加笔画时，会出现其他缺陷，如下所示。
有不相交的角、从错误位置开始并最终被其他形状覆盖的形状、显示背景的间隙或可见错误形状等。在某些缩放级别下差异更严重.
我似乎遇到了 所描述问题的一个版本，其中回答者说问题出在抗锯齿上。回答者建议添加shape-rendering: crispEdges，但这实际上使问题对我来说更糟，并且不能满足该问题的提问者。添加笔划消除了大部分（但不是全部）<path> 之间的间隙，但这同样会导致其他问题。
我也试过 shape-rendering: geometricPrecision，但没有用。
如何消除形状之间的间隙而不产生额外的差异？
好吧，这里似乎没有真正好的解决方案。
不过，我意识到 stroke-width 的值可以小于 1。所以我尝试使用不同的分数，直到形状之间的大部分间隙被覆盖，但其他失真保持在最低限度。
我降落在 stroke-width: .5。
如果有人发现别的东西，我会很乐意接受。
根据一些计算，我使用D3.js在canvas上绘制了数百个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> 一个相同颜色的笔触时，形状之间会有很多很多微小的间隙。但是，当我添加笔画时，会出现其他缺陷，如下所示。
有不相交的角、从错误位置开始并最终被其他形状覆盖的形状、显示背景的间隙或可见错误形状等。在某些缩放级别下差异更严重.
我似乎遇到了 shape-rendering: crispEdges，但这实际上使问题对我来说更糟，并且不能满足该问题的提问者。添加笔划消除了大部分（但不是全部）<path> 之间的间隙，但这同样会导致其他问题。
我也试过 shape-rendering: geometricPrecision，但没有用。
如何消除形状之间的间隙而不产生额外的差异？
好吧，这里似乎没有真正好的解决方案。
不过，我意识到 stroke-width 的值可以小于 1。所以我尝试使用不同的分数，直到形状之间的大部分间隙被覆盖，但其他失真保持在最低限度。
我降落在 stroke-width: .5。
如果有人发现别的东西，我会很乐意接受。