SVG中(0,y)坐标处描边宽度过细的原因及解决方法

问题现象 #

对比两段SVG代码：
第一段：

<SVG>
  <PATH d="M 0 0  L 0 50" stroke="#FFFFFF" />
</SVG>

第二段：

<SVG>
  <PATH d="M 1 0  L 1 50" stroke="#FFFFFF" />
</SVG>

在Firefox浏览器中，第一段代码的描边看起来更细，第二段显示正常（若背景为白色，建议修改描边颜色为深色便于观察），效果如下：

原因分析 #

这是Firefox的半像素渲染裁剪机制导致的：

• SVG默认描边宽度为1px，描边沿路径中心线绘制。
• 当路径位于x=0这类整数像素边界时，描边的一半（0.5px）会被绘制到SVG视口外部，Firefox会自动裁剪视口外的内容，最终仅显示剩余的0.5px描边，视觉上就显得更细。
• 当路径位于x=1时，描边中心线落在整数像素位置，左右两侧的0.5px都处于视口范围内，因此能完整显示1px的描边。

解决方法 #

可通过以下几种方式修复：

• 调整路径位置：将路径从整数像素边界偏移0.5px，比如把M 0 0改为M 0.5 0，让描边中心线落在半像素位置，确保描边的左右部分都在视口内正常显示。
• 添加vector-effect: non-scaling-stroke属性：给<PATH>标签添加该属性，强制浏览器按实际像素尺寸渲染描边，规避位置导致的裁剪问题。
• 显式设置描边对齐方式：部分浏览器支持stroke-alignment: inside，将其添加到<PATH>中，让描边完全绘制在路径内部，避免超出视口范围。

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