Question

我正在尝试使用SVG创建调色板。为此，我提到了许多rect个元素，只是改变了每个元素的样式。问题是，有时，元素之间会出现一小块白色，如下图所示：

svg palette

此快照是在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>

Answer 1

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

<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中的abutted rect元素留下了很小的空隙

1 个答案: