当 svg 半圆使用较粗描边（如 stroke-width ≥ 20）时，描边会超出 viewBox 边界被裁剪，导致视觉“切角”；根本解决方法是扩大 viewBox 范围，为描边预留足够空间。
当 svg 半圆使用较粗描边（如 `stroke-width ≥ 20`）时，描边会超出 viewbox 边界被裁剪，导致视觉“切角”；根本解决方法是扩大 viewbox 范围，为描边预留足够空间。
在 SVG 中，stroke 是沿路径中心线向两侧等距延伸绘制的。以半圆弧为例：路径中心线构成一个半径为 80 的圆弧，当 stroke-width 设为 20 时，实际渲染区域将从中心线向外延伸 10px（即半宽），因此整体占据的最小外接矩形半径变为 80 + 10 = 90。而原始
✅ 正确做法：按描边宽度扩展 viewBox
只需将 viewBox 向外平移并增大尺寸，确保所有描边像素均在可视区域内。计算公式如下：
new viewBox = [x_min - stroke_half, y_min - stroke_half, width + stroke_width, height + stroke_width]对于本例：
- 原始 viewBox：”0 0 160 160″ → 对应圆心在 (80, 80)，半径 80
- stroke-width=”20″ → 描边半宽 = 10
- 路径最左点 x ≈ 0 − 10 = −10，最上点 y ≈ 0 − 10 = −10
- 新 viewBox 宽高需增加 2×10 = 20 → 160 + 20 = 170
因此推荐写法：
<svg width="160" height="160" viewBox="-10 -10 170 170"> <g stroke="black" fill="none" stroke-width="20"> <path d="M 0 80 A 80 80 0 0 1 80 0" /> </g> <animatetransform attributeName="transform" type="rotate" dur="2s" from="0 80 80" to="360 80 80" repeatCount="indefinite" /> </svg>⚠️ 注意事项：
- from 和 to 中的旋转中心建议显式设为圆心 (80 80)，而非 (0 0)，否则动画会绕画布左上角旋转，造成位移错乱；
- 不要试图用 clip-path 或 overflow: visible 替代 viewBox 调整——SVG 渲染器默认对 viewBox 外内容做硬裁剪，overflow 属性在多数浏览器中对
- 若需响应式缩放，应同时调整 width/height 与 viewBox 比例，或改用 CSS transform: scale() 配合固定 viewBox；
- 此原理适用于所有带粗描边的 SVG 路径（圆、椭圆、多边形等），核心原则始终是：viewBox 必须包容 stroke 的完整物理占用区域。
总结：描边溢出不是 bug，而是 SVG 坐标系统与渲染模型的自然结果。通过合理扩展 viewBox，既能保持图形几何语义不变，又能实现任意粗细描边的完整显示——这是专业 SVG 动画开发中最基础也最关键的布局意识之一。