SVG中邻接的rect元素留下了一个很小的间隙_Svg

SVG中邻接的rect元素留下了一个很小的间隙

svg

SVG中邻接的rect元素留下了一个很小的间隙,svg,Svg,我正在尝试使用SVG创建调色板。为此，我考虑了许多rect元素，只需更改每个元素的样式。问题是，有时元素之间会有一条很小的白色长条，如图所示：此快照是在OSX上的Chrome中拍摄的。Safari看起来很像在我的代码中，viewBox不是常数，它可以根据矩形的数量而变化。此外，宽度和高度也可以根据选择的分辨率而变化。换言之，我不能用这些来让这个看起来合适我试着把每个矩形都做得比需要的宽一点，但效果是一样的。在上图中，顶行的宽度为100.1，而底行的宽度为100。使宽度101起作用，但我

我正在尝试使用SVG创建调色板。为此，我考虑了许多

rect

元素，只需更改每个元素的样式。问题是，有时元素之间会有一条很小的白色长条，如图所示：

此快照是在OSX上的Chrome中拍摄的。Safari看起来很像

在我的代码中，

viewBox

不是常数，它可以根据矩形的数量而变化。此外，宽度和高度也可以根据选择的分辨率而变化。换言之，我不能用这些来让这个看起来合适

我试着把每个矩形都做得比需要的宽一点，但效果是一样的。在上图中，顶行的宽度为

100.1

，而底行的宽度为

。使宽度

起作用，但我不能使用它，因为在某些情况下，

rect

的预期宽度可能是单个数字，因此宽度的额外1是显著重叠

我尝试添加了一个笔划，但没有效果，因为所需的宽度取决于

viewBox

和

rect

大小

你看到这个问题了吗

这是我的密码：

<html>
<body>
    <svg width="1000" height="1000" viewBox="0 0 5000 5000">
        <g>
            <rect x="0" y="0" width="100.1" height="100" style="fill:rgb(0,0,255)"></rect>
            <rect x="100" y="0" width="100.1" height="100" style="fill:rgb(0,0,250)"></rect>
            <rect x="200" y="0" width="100.1" height="100" style="fill:rgb(0,0,245)"></rect>
            <rect x="300" y="0" width="100.1" height="100" style="fill:rgb(0,0,240)"></rect>
            <rect x="400" y="0" width="100.1" height="100" style="fill:rgb(0,0,235)"></rect>
            <rect x="500" y="0" width="100.1" height="100" style="fill:rgb(0,0,230)"></rect>
            <rect x="600" y="0" width="100.1" height="100" style="fill:rgb(0,0,225)"></rect>
            <rect x="700" y="0" width="100.1" height="100" style="fill:rgb(0,0,220)"></rect>
            <rect x="800" y="0" width="100.1" height="100" style="fill:rgb(0,0,215)"></rect>
            <rect x="900" y="0" width="100.1" height="100" style="fill:rgb(0,0,210)"></rect>
            <rect x="1000" y="0" width="100.1", height="100" style="fill:rgb(0,0,205)"></rect>
            <rect x="1100" y="0" width="100.1" height="100" style="fill:rgb(0,0,200)"></rect>
            <rect x="1200" y="0" width="100.1" height="100" style="fill:rgb(0,0,195)"></rect>
            <rect x="1300" y="0" width="100.1" height="100" style="fill:rgb(0,0,190)"></rect>
            <rect x="1400" y="0" width="100.1" height="100" style="fill:rgb(0,0,185)"></rect>
            <rect x="0" y="100" width="100" height="100" style="fill:rgb(0,0,255)"></rect>
            <rect x="100" y="100" width="100" height="100" style="fill:rgb(0,10,250)"></rect>
            <rect x="200" y="100" width="100" height="100" style="fill:rgb(0,20,245)"></rect>
            <rect x="300" y="100" width="100" height="100" style="fill:rgb(0,30,240)"></rect>
            <rect x="400" y="100" width="100" height="100" style="fill:rgb(0,40,235)"></rect>
            <rect x="500" y="100" width="100" height="100" style="fill:rgb(0,50,230)"></rect>
            <rect x="600" y="100" width="100" height="100" style="fill:rgb(0,60,225)"></rect>
            <rect x="700" y="100" width="100" height="100" style="fill:rgb(0,70,220)"></rect>
            <rect x="800" y="100" width="100" height="100" style="fill:rgb(0,80,215)"></rect>
            <rect x="900" y="100" width="100" height="100" style="fill:rgb(0,90,210)"></rect>
            <rect x="1000" y="100" width="100" height="100" style="fill:rgb(0,100,205)"></rect>
            <rect x="1100" y="100" width="100" height="100" style="fill:rgb(0,110,200)"></rect>

            <rect x="1200" y="100" width="100" height="100" style="fill:rgb(0,120,195)"></rect>
            <rect x="1300" y="100" width="100" height="100" style="fill:rgb(0,130,190)"></rect>
            <rect x="1400" y="100" width="100" height="100" style="fill:rgb(0,140,185)"></rect>
        </g>
    </svg>
</body>
</html>

这是抗锯齿，请尝试将shape rendering=“crispEdges”设置为父元素上的属性以禁用该功能