SVG中邻接的rect元素留下很小的空隙 [英] Abutted rect elements in SVG leave a tiny gap

查看：102
本文介绍了SVG中邻接的rect元素留下很小的空隙的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用SVG创建调色板.为此，我约有许多rect元素，只是更改了每个元素的样式. 问题在于，有时元素之间只有一小段白色，如下图所示:

I am trying to create a color palette using SVG. For this, I about many rect elements and just change the style for each one. The issue is that, sometimes, there is tiny sliver of white between the elements, as in this image:

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

This snapshot was taken in Chrome on OSX. Safari looks similar.

在我的代码中，viewBox不是恒定的，并且可以根据矩形的数量而变化.此外，宽度和高度也可以根据选择的分辨率而变化.换句话说，我无法使用它们来使这一外观看起来正确.

In my code viewBox is not constant and can vary depending on the number of rectangles. Additionally, width and height can also vary depending on chosen resolution. In other words, I can't play with these to make this one look right.

我尝试创建每个矩形比需要的宽一点，但是效果是一样的.在上图中，最上面一行的宽度为100.1，而最下面一行的宽度为100.使宽度101有效，但是我不能使用它，因为在某些情况下，rect的预期宽度可能是个位数，因此宽度额外增加1就是明显的重叠.

I tried creating each rect a bit wider than necessary, but the effect was the same. In teh above picture the top row has a width of 100.1, while the bottom has 100. Making the width 101 worked, but I can't use this since in some cases the expected width of a rect could be single digits, so an extra 1 to the width is significant overlap.

我尝试添加笔触，但这不能起作用，因为完成此工作所需的宽度取决于viewBox和rect的大小.

I tried adding a stroke, but that didn't work as the required width to make this work depends on viewBox and rect sizes.

您看到了这个问题吗?

这是我的代码:

<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>

推荐答案

这是抗锯齿，请尝试在<g>父元素上将shape-rendering ="crispEdges"设置为属性以禁用该功能.

That's antialiasing, try set shape-rendering="crispEdges" as an attribute on the <g> parent element to disable that.

<html>
<body>
    <svg width="1000" height="1000" viewBox="0 0 5000 5000">
        <g shape-rendering="crispEdges">
            <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中邻接的rect元素留下很小的空隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆