如何摆脱 SVG 中不需要的细边框？不同的行为（IE、Chrome 等）

Question

我正在创建一些由多个矩形组成的 SVG 图像。这些矩形彼此相邻，边缘 "touch" 彼此，一些浏览器（例如，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单位的转换结果会给出一小部分。

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

此外，一些渲染器在处理小数字时会遇到舍入例程的一些困难。如果将所有矩形大小和位置乘以 10，然后将 viewBox 大小增加相同的系数，但保持 <svg> 宽度和高度不变，结果可能会有所改善。

如何摆脱 SVG 中不需要的细边框？不同的行为（IE、Chrome 等）

How to get rid of unwanted thin borders in SVG? Different behavior (IE, Chrome, etc.)

browser

internet-explorer

svg

google-chrome

inkscape