调整stroke-width属性后SVG图标出现裁剪问题的技术求助

SVG的描边是居中绘制的——描边宽度的一半会落在图形/路径的外侧，另一半在内侧。你原来的viewBox刚好贴合图形的外边缘，当把stroke-width改成16后，外侧的8px描边超出了viewBox范围，自然就被裁剪了。

给你两个关键调整步骤：

• 调整viewBox，给描边留出足够空间
  因为stroke-width是16，所以要给viewBox的四个方向各加8px（16的一半）的余量。原来的viewBox是0 0 152 132，修改后应该是-8 -8 168 148。这个数值是这么算的：左/上偏移减8，宽/高各加16（8*2）。

• 按需调整width和height
  如果想保持图标显示尺寸和原来一致，width和height可以保留152和132，viewBox会自动适配让描边完整显示；如果要让图标整体放大到包含全部描边的尺寸，就把width改成168、height改成148。

修改后的完整SVG代码：

<svg width="152" height="132" viewBox="-8 -8 168 148" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M150 130C150 120.05 148.086 110.198 144.367 101.005C140.648 91.8125 135.197 83.46 128.326 76.4243C121.454 69.3887 114.978 63.8077 106 60C96.5 70.5 87 74 77 74C67.9861 74 58.5 71.5 47.6814 60C38.7033 63.8077 30.5456 69.3887 23.6741 76.4243C16.8026 83.46 11.3518 91.8125 7.63291 101.005C3.91407 110.198 2 120.05 2 130H76L150 130Z" stroke="#0053A4" stroke-width="16"/>
<circle cx="77" cy="38" r="36" stroke="#0053A4" stroke-width="16"/>
</svg>

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