svg - ピクセルが整列されていない、タイル化された SVG 四角形の間の線を避ける

Question

この質問rectのような近くの がいくつかありますが、ピクセルに合わせていません。要素の位置を変更できません。たとえば:

<svg width="326.01071" height="255.5332" xmlns="http://www.w3.org/2000/svg"
   viewBox="18 18 41 41"
>
    <rect x="21" y="21" width="51" height="3" fill="black" class="crisp" />
    <rect x="21" y="24" width="30" height="3" fill="black" class="crisp" />
    <rect x="21" y="41" width="51" height="3" fill="black" />
    <rect x="21" y="44" width="30" height="3" fill="black" />
</svg>​

私は四角形の間に細い線を引いています。shape-rendering="crispEdges"役に立ちません。

オーバーラップを少し追加すると少しは効果がありますが、2 つのアンチエイリアス処理されたエッジが結合する垂直ジョイントに目に見えるスパイクが発生します。

何か私にできることはありますか？

四角形は同じ色なので、インテリジェントなアルゴリズムを導入して、隣接する四角形を 1 つの形状に結合できます。これはクリーンな方法ですが、難しい方法です。