google-chrome - 如何摆脱 SVG 中不需要的细边框？不同的行为(IE、Chrome 等)

Question

我正在创建一些由多个矩形组成的 SVG 图像。这些矩形彼此相邻，边缘彼此“接触”，一些浏览器(例如 Chrome、Vivaldi)和图像转换器在这些矩形之间呈现不需要的细线。同时，其他一些浏览器(IE、Edge)以所需的方式显示 SVG。

我在多个浏览器和 Inkscape 编辑器中检查了 SVG(我已将 SVG 导出为 PNG，并且线条也存在)。

我可以通过添加一些微小的重叠来解决这个问题，但我不喜欢这样的解决方案。

这是浏览器和 Inkscape 中使用的 SVG 库中的错误吗？或者我应该使用一些 SVG 功能来修复它吗？

Chrome example

Inkscape example

Edge example

<svg height="10cm" viewBox="0 0 10 10" width="10cm" xmlns="http://www.w3.org/2000/svg">
    <rect fill="#ff00ff" height="1" opacity="1" width="1" x="1" y="1"/>
    <rect fill="#ff00ff" height="1" opacity="1" width="1" x="2" y="1"/>
    <rect fill="#ff00ff" height="1" opacity="1" width="1" x="3" y="1"/>

    <rect fill="#167f81" height="1" opacity="1" width="1" x="1" y="2"/>
    <rect fill="#167f81" height="1" opacity="1" width="1" x="2" y="2"/>
    <rect fill="#167f81" height="1" opacity="1" width="1" x="3" y="2"/>

    <rect fill="#000000" height="1" opacity="1" width="1" x="1" y="3"/>
    <rect fill="#000000" height="1" opacity="1" width="1" x="2" y="3"/>
    <rect fill="#000000" height="1" opacity="1" width="1" x="3" y="3"/>   
</svg>

Answer 1

这些边缘是渲染器在边框与屏幕像素或打印机点不匹配时进行权衡的结果。你可以声明

shape-rendering="crispEdges"

至 give a hint到渲染器设置边缘，使其始终与像素重合，即使计算从用户空间坐标到现实世界坐标的转换结果 cm单位会给出一个分数。

请注意，这是渲染器可能会或可能不会兑现的提示。

此外，一些渲染器在处理小数字时对舍入例程有点困难。如果您将所有 rect 的大小和位置乘以 10，从而将 viewBox 的大小增加相同的因子，但保留 <svg>宽度和高度不变，结果可能会有所改善。