Svg 如何放置<；rect>；s肩并肩？

我想将SVG中的填充方块彼此相邻，但它们之间有细线。如何消除这些线

例如：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="3cm" height="3cm" viewBox="0 0 10 10">
    <rect x="0" y="0" width="1" height="1" fill="black" />
    <rect x="2" y="0" width="1" height="1" fill="black" />
    <rect x="4" y="0" width="1" height="1" fill="black" />
    <rect x="6" y="0" width="1" height="1" fill="black" />
    <rect x="8" y="0" width="1" height="1" fill="black" />
    <rect x="0" y="1" width="1" height="1" fill="black" />
    <rect x="2" y="1" width="1" height="1" fill="black" />
    <rect x="3" y="1" width="1" height="1" fill="black" />
    <rect x="4" y="1" width="1" height="1" fill="black" />
    <rect x="5" y="1" width="1" height="1" fill="black" />
    <rect x="6" y="1" width="1" height="1" fill="black" />
    <rect x="7" y="1" width="1" height="1" fill="black" />
    <rect x="9" y="1" width="1" height="1" fill="black" />
    <rect x="0" y="2" width="1" height="1" fill="black" />
    <rect x="2" y="2" width="1" height="1" fill="black" />
    <rect x="8" y="2" width="1" height="1" fill="black" />
    <rect x="0" y="3" width="1" height="1" fill="black" />
    <rect x="1" y="3" width="1" height="1" fill="black" />
    <rect x="3" y="3" width="1" height="1" fill="black" />
    <rect x="5" y="3" width="1" height="1" fill="black" />
    <rect x="6" y="3" width="1" height="1" fill="black" />
    <rect x="8" y="3" width="1" height="1" fill="black" />
    <rect x="9" y="3" width="1" height="1" fill="black" />
    <rect x="0" y="4" width="1" height="1" fill="black" />
    <rect x="1" y="4" width="1" height="1" fill="black" />
    <rect x="5" y="4" width="1" height="1" fill="black" />
    <rect x="6" y="4" width="1" height="1" fill="black" />
    <rect x="8" y="4" width="1" height="1" fill="black" />
    <rect x="0" y="5" width="1" height="1" fill="black" />
    <rect x="3" y="5" width="1" height="1" fill="black" />
    <rect x="4" y="5" width="1" height="1" fill="black" />
    <rect x="9" y="5" width="1" height="1" fill="black" />
    <rect x="0" y="6" width="1" height="1" fill="black" />
    <rect x="5" y="6" width="1" height="1" fill="black" />
    <rect x="6" y="6" width="1" height="1" fill="black" />
    <rect x="8" y="6" width="1" height="1" fill="black" />
    <rect x="0" y="7" width="1" height="1" fill="black" />
    <rect x="4" y="7" width="1" height="1" fill="black" />
    <rect x="5" y="7" width="1" height="1" fill="black" />
    <rect x="6" y="7" width="1" height="1" fill="black" />
    <rect x="8" y="7" width="1" height="1" fill="black" />
    <rect x="9" y="7" width="1" height="1" fill="black" />
    <rect x="0" y="8" width="1" height="1" fill="black" />
    <rect x="1" y="8" width="1" height="1" fill="black" />
    <rect x="2" y="8" width="1" height="1" fill="black" />
    <rect x="7" y="8" width="1" height="1" fill="black" />
    <rect x="8" y="8" width="1" height="1" fill="black" />
    <rect x="0" y="9" width="1" height="1" fill="black" />
    <rect x="1" y="9" width="1" height="1" fill="black" />
    <rect x="2" y="9" width="1" height="1" fill="black" />
    <rect x="3" y="9" width="1" height="1" fill="black" />
    <rect x="4" y="9" width="1" height="1" fill="black" />
    <rect x="5" y="9" width="1" height="1" fill="black" />
    <rect x="6" y="9" width="1" height="1" fill="black" />
    <rect x="7" y="9" width="1" height="1" fill="black" />
    <rect x="8" y="9" width="1" height="1" fill="black" />
    <rect x="9" y="9" width="1" height="1" fill="black" />
</svg>

---

我的名声不允许我发布图片，但你可以仔细看看我的头像。

你看到了反锯齿的效果

---

将shape rendering=“crispEdges”添加到根元素（或者每个rect）以获得所需的显示。

您可以看到抗锯齿工作

---

将shape rendering=“crispEdges”添加到根

元素（或者每个rect）以获得所需的显示。

即使无法放置图像，也可以使用JSFIDLE：即使无法放置图像，也可以使用JSFIDLE：