如何解决SVG路径CSS描边不均匀问题，实现均匀4px描边？

原因 #

SVG描边默认是居中于路径绘制的，也就是描边宽度的一半在路径内侧，一半在外侧。你的路径多处贴合SVG viewBox的边缘（比如左上角起点(0, 117.999999)刚好在viewBox的左、下边缘），导致这部分描边的外侧超出viewBox范围被裁剪，实际显示宽度只有设置值的一半。而拐角处两条被裁剪的描边交汇，视觉上叠加显得更粗，最终造成整体描边粗细不均。

解决方法 #

要实现各边均为4px的均匀描边，有两种可行方案：

方案1：调整路径与viewBox的位置 #

让路径所有线段与viewBox边缘保持至少stroke-width/2（即2px）的距离，确保描边完整显示。具体操作：

• 把viewBox扩大4px（上下左右各偏移2px）
• 将路径整体向内偏移2px

修改后的代码：

path{
  fill: transparent;
  stroke: #35a4e8;
  stroke-width: 4px;
}

<svg viewBox="-2 -2 122 122" xmlns="http://www.w3.org/2000/svg">
  <path d="m2 115.999999.087436-99.4506004 49.406364-18.13336901 68.5062-.41602959v117.999999z" />
</svg>

方案2：设置描边内侧对齐 #

现代浏览器支持stroke-alignment: inner属性，可直接让描边全部绘制在路径内侧，避免描边超出viewBox被裁剪。修改后的CSS：

path{
  fill: transparent;
  stroke: #35a4e8;
  stroke-width: 4px;
  stroke-alignment: inner;
}

注意：该属性兼容性有限，旧版浏览器可能不支持。

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