SVG 中相邻的 rect 元素会留下一个微小的间隙

Posted 2023-03-28

技术标签:

【中文标题】SVG 中相邻的 rect 元素会留下一个微小的间隙【英文标题】：Abutted rect elements in SVG leave a tiny gap 【发布时间】：2022-01-12 07:08:59 【问题描述】：

我正在尝试使用 SVG 创建调色板。为此，我使用了许多 rect 元素，并为每个元素更改样式。问题在于，有时元素之间会出现细小的白色条，如下图所示：

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

在我的代码中，viewBox 不是恒定的，可以根据矩形的数量而变化。此外，宽度和高度也可以根据选择的分辨率而变化。换句话说，我不能用这些来使这个看起来正确。

我尝试将每个矩形创建得比必要的宽一点，但效果是一样的。在上图中，顶行的宽度为100.1，而底行的宽度为100。使宽度 101 起作用，但我不能使用它，因为在某些情况下，rect 的预期宽度可能是个位数，因此宽度的额外 1 是显着重叠。

我尝试添加描边，但这不起作用，因为完成这项工作所需的宽度取决于viewBox 和rect 的大小。

你见过这个问题吗？

这是我的代码：

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

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

【问题讨论】：

【参考方案1】：

这是抗锯齿，尝试将 shape-rendering="crispEdges" 设置为 <g> 父元素的属性以禁用它。

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

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

【讨论】：

以上是关于SVG 中相邻的 rect 元素会留下一个微小的间隙的主要内容，如果未能解决你的问题，请参考以下文章

动态分组 SVG 元素

Javascript 函数未在单击时定义 SVG 元素

SVG.js 元素操作整理

选项元素内的 SVG

selenium玩转svg操作

移除 Angular 组件创建的宿主 HTML 元素选择器