【发布时间】：2022-01-12 07:08:59
【问题描述】：
我正在尝试使用 SVG 创建调色板。为此，我使用了许多 rect 元素，并为每个元素更改样式。
问题在于，有时元素之间会出现细小的白色条，如下图所示：
此快照是在 OSX 上的 Chrome 中拍摄的。 Safari 看起来很相似。
在我的代码中，viewBox 不是恒定的，可以根据矩形的数量而变化。此外，宽度和高度也可以根据选择的分辨率而变化。换句话说，我不能用这些来使这个看起来正确。
我尝试将每个矩形创建得比必要的宽一点，但效果是一样的。在上图中，顶行的宽度为100.1，而底行的宽度为100。使宽度 101 起作用，但我不能使用它，因为在某些情况下，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>
【问题讨论】：
标签： svg