SVG stroke-width增大时图形收缩问题求助

当SVG路径处于填充状态且增大stroke-width值时，图形反而逐渐收缩。以下是问题复现的完整SVG代码，以及不同stroke-width值的效果截图：

问题复现代码 #

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="spum50f8sl" x="0px" y="0px" width="461px" height="461px" viewBox="0 0 461 461" enable-background="new 0 0 100 100" xml:space="preserve" isInit="true" opacity="1" style="display: block; overflow: hidden; position: absolute; left: 0px; top: 0px;">
  <defs isInit="true">
    <clipPath isInit="true" id="spum50f8sloutlineclippath">
      <path d="M0,230.04000000000002A230.04000000000002,230.04000000000002,0,1,0,460.08000000000004,230.04000000000002A230.04000000000002,230.04000000000002,0,1,0,0,230.04000000000002Z" fill="#cacaca" origin_fill="#cacaca" isInit="true"></path>
    </clipPath>
  </defs>
  <g clip-path="url(#spum50f8sloutlineclippath)" stroke="#000000" stroke-width="500">
    <path d="M0,230.04000000000002A230.04000000000002,230.04000000000002,0,1,0,460.08000000000004,230.04000000000002A230.04000000000002,230.04000000000002,0,1,0,0,230.04000000000002Z" fill="#cacaca" origin_fill="#cacaca" isInit="true"></path>
  </g>
</svg>

效果对比 #

• stroke-width: 500效果：
  

• stroke-width: 800效果：
  

问题原因分析 #

1. 描边分布规则：SVG描边默认是居中分布在路径轮廓的两侧，即一半描边在路径外侧，一半在内侧。
2. 裁剪路径限制：当前SVG使用了和内部路径完全一致的裁剪路径，当stroke-width增大时，向外扩展的描边会被裁剪路径截断，只有向内扩展的部分保留，这部分会覆盖原本的填充区域，导致视觉上图形整体收缩。

解决思路 #

方案1：移除不必要的裁剪路径 #

如果该裁剪路径没有实际业务用途，直接删除即可，让描边可以正常向外扩展：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="spum50f8sl" x="0px" y="0px" width="461px" height="461px" viewBox="0 0 461 461" enable-background="new 0 0 100 100" xml:space="preserve" isInit="true" opacity="1" style="display: block; overflow: hidden; position: absolute; left: 0px; top: 0px;">
  <g stroke="#000000" stroke-width="500">
    <path d="M0,230.04A230.04,230.04,0,1,0,460.08,230.04A230.04,230.04,0,1,0,0,230.04Z" fill="#cacaca" origin_fill="#cacaca" isInit="true"></path>
  </g>
</svg>

方案2：调整描边对齐方式（保留裁剪路径时） #

如果必须保留裁剪路径，可以设置描边仅向内扩展：

• 部分现代浏览器支持stroke-alignment="inner"属性，直接添加到g或path元素上；
• 标准SVG中可通过vector-effect="non-scaling-stroke"配合路径偏移，或者重新绘制向内偏移的路径来实现类似效果。

方案3：替换为环形路径实现 #

如果目标是创建环形效果，直接使用两个同心圆的差集路径（通过<path>的d指令绘制外环减内环），比填充加大描边的方式更可控，避免描边裁剪问题。

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