当 SVG 半圆使用较大 stroke-width 时，描边边缘常因超出 viewBox 边界而被裁剪；通过合理扩展 viewBox 范围（如向四周预留描边半宽），可完美容纳描边，避免视觉截断。
当 svg 半圆使用较大 `stroke-width` 时，描边边缘常因超出 viewbox 边界而被裁剪；通过合理扩展 viewbox 范围（如向四周预留描边半宽），可完美容纳描边，避免视觉截断。
在 SVG 中绘制带粗描边的弧线（如半圆）时，一个常见却容易被忽视的问题是：描边被“硬性裁剪”。这是因为 SVG 的 viewBox 定义了渲染的逻辑坐标范围，而描边默认以路径为中心线向两侧延伸——当描边宽度较大（如 stroke-width="20"）时，其外侧一半（10px）会超出原始 viewBox 边界，导致视觉上出现明显的“切角”或“截断”，尤其在动画旋转时尤为刺眼。
根本原因在于：你的原始
✅ 正确解法不是缩小半径，也不是改用“内描边”（SVG 不支持 stroke-alignment: inner 这类 CSS 属性），而是科学扩展 viewBox：
- 原 viewBox："0 0 160 160" → 覆盖 [x=0→160, y=0→160]
- 描边宽度为 20，意味着每侧最多延伸 10px
- 因此需将 viewBox 向左、上各扩展 10，向右、下也各扩展 10
- 新 viewBox："-10 -10 170 170"（宽度/高度保持 160 + 2×10 = 170）
以下是修复后的完整代码示例：
<svg width="160" height="160"
viewBox="-10 -10 170 170"
xmlns="http://www.w3.org/2000/svg">
<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" <!-- 注意：旋转中心建议设为圆弧几何中心 (80,80) -->
to="360 80 80"
repeatCount="indefinite" />
</svg>? 关键优化说明：
- viewBox="-10 -10 170 170" 确保描边所有像素均在可视区域内；
- 动画 from/to 中的旋转中心 80 80 更贴合该半圆的实际圆心（原路径是以 (80,80) 为圆心的上半圆左半段），使旋转更自然；
- 若需纯视觉居中，还可配合 transform="translate(80,80)" 对整个
进行偏移（但需同步调整 animateTransform 中心点）。
⚠️ 注意事项：
- 不要依赖 overflow: visible —— SVG 元素默认 overflow="hidden"，且在
- 避免盲目增大 stroke-width 后仅调大 width/height 属性：若 viewBox 不变，仍会裁剪；
- 对于动态计算场景（如响应式 SVG），建议用 JavaScript 按 stroke-width / 2 自动修正 viewBox。
总结：SVG 描边溢出本质是坐标系管理问题。扩展 viewBox 是最简洁、兼容性最佳、且无需修改路径逻辑的通用解法。掌握这一原则，可从容应对饼图、环形进度条、旋转仪表盘等各类带粗描边的 SVG 动画开发。
