Question

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

我在多个浏览器和Inkscape编辑器中检查了SVG（我已将SVG导出到PNG，并且还显示了行）。

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

这是浏览器和Inkscape中使用的SVG库中的错误吗？还是我应该使用某些SVG功能对其进行修复？

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

1 个答案: