Firefox与Chrome中带stroke-width的SVG渲染差异及统一方案咨询

你遇到的问题核心是SVG的stroke默认采用居中绘制逻辑：stroke宽度的一半在图形边界内，另一半在边界外。Chrome会裁剪掉超出SVG视口的stroke部分，而Firefox会保留完整的图形（含外部stroke），导致视觉上的尺寸差异。

要实现类似CSS box-sizing: border-box的效果，让stroke完全包含在图形的width/height范围内，有两种可靠的标准实现方法：

方法1：手动调整尺寸 + 固定stroke渲染逻辑 #

通过收缩图形的宽高，并偏移位置，把stroke的宽度纳入原本的尺寸范围，同时用vector-effect: non-scaling-stroke确保stroke宽度不受图形变换影响：

<html>
<body>
<svg width="400" height="110">
  <!-- 宽高各减去2倍stroke-width，同时偏移位置让stroke完全在内部 -->
  <rect width="394" height="94" x="3" y="3" style="fill:white;stroke-width:3;stroke:red;vector-effect: non-scaling-stroke" />
</svg>
</body>
</html>

这种方法兼容所有支持SVG的浏览器，无需担心版本问题。

方法2：使用SVG2的stroke-alignment: inner属性 #

这是SVG规范新增的属性，直接指定stroke绘制在图形边界内部，无需手动调整尺寸：

<html>
<body>
<svg width="400" height="110">
  <rect width="400" height="100" style="fill:white;stroke-width:3;stroke:red;stroke-alignment: inner" />
</svg>
</body>
</html>

注意：该属性已被Chrome、Firefox等现代浏览器支持，若需兼容旧版浏览器，优先选择方法1。

关键提醒 #

不要依赖浏览器的默认裁剪差异实现效果，这类行为不属于SVG规范的强制要求，随时可能因浏览器版本更新而变化。上述两种方法均基于标准规范，能保证跨浏览器渲染一致性。

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