Chrome/Edge中SVG相邻白色方块渲染出现细线问题咨询

问题原因 #

这不是SVG的固有特性，也不属于严格意义上的浏览器Bug，本质是Blink引擎（Chrome/Edge使用）的亚像素渲染对齐问题：
当SVG通过viewBox进行缩放时，矩形的边界可能落在屏幕像素的亚像素位置，Blink会启用抗锯齿处理，导致相邻矩形之间露出背景色的细线。Firefox的Gecko引擎采用了不同的渲染策略，避免了这种情况。

解决办法 #

以下是几种实用的修复方案：

1. 启用shape-rendering: crispEdges #

这是最简单直接的方法，通过关闭抗锯齿强制元素边界对齐像素网格，彻底消除细线。可以给SVG标签或包含矩形的<g>元素添加该样式：

<svg id="SVGCanvas" xmlns="http://www.w3.org/2000/svg" style="background: #000000; shape-rendering: crispEdges" viewBox="-1 -1 5 5" >
    <g>
        <rect x="0" y="0"  width="1" height="1" fill="white"/>
        <rect x="0" y="1"  width="1" height="1" fill="white"/>
        <rect x="0" y="2"  width="1" height="1" fill="white"/>
        <rect x="1" y="0"  width="1" height="1" fill="white"/>
        <rect x="1" y="1"  width="1" height="1" fill="white"/>
        <rect x="1" y="2"  width="1" height="1" fill="white"/>
        <rect x="2" y="0"  width="1" height="1" fill="white"/>
        <rect x="2" y="1"  width="1" height="1" fill="white"/>
        <rect x="2" y="2"  width="1" height="1" fill="white"/>
    </g>
</svg>

注意：该属性会让所有形状边缘变得锐利，如果SVG包含曲线元素，可能出现锯齿。

2. 合并所有矩形为单个路径 #

将9个独立矩形合并成一个完整的<path>，从根源上消除相邻边界的渲染问题：

<svg id="SVGCanvas" xmlns="http://www.w3.org/2000/svg" style="background: #000000" viewBox="-1 -1 5 5" >
    <path d="M0 0h3v3h-3z" fill="white"/>
</svg>

这个方案最彻底，没有抗锯齿相关的副作用，适合规则的矩形组合场景。

3. 微调元素位置或尺寸 #

通过轻微偏移矩形的坐标（如x="0.01"）或放大尺寸（如width="1.001"），让边界避开亚像素位置：

<rect x="0.01" y="0.01" width="1.001" height="1.001" fill="white"/>

缺点：适配不同缩放比例时可能失效，属于临时 workaround，不推荐作为长期方案。

内容的提问来源于stack exchange，提问作者hfmanson