当 SVG 半圆使用较粗描边（如 stroke-width ≥ 20）时，描边会超出 viewBox 边界被裁剪，导致视觉“切角”。根本解决方法是扩大 viewBox 范围以容纳描边溢出，而非缩小半径或改用内描边（SVG 不支持 stroke 内对齐）。
当 svg 半圆使用较粗描边（如 `stroke-width ≥ 20`）时，描边会超出 viewbox 边界被裁剪，导致视觉“切角”。根本解决方法是扩大 viewbox 范围以容纳描边溢出，而非缩小半径或改用内描边（svg 不支持 stroke 内对齐）。
在 SVG 中，stroke 默认以路径中心线为基准向两侧等量延伸。对于一个以原点为起点、半径为 80 的四分之一椭圆弧（A 80 80 ...），其最远端点位于 (80, 0)，而 20px 宽的描边会使实际渲染区域向外延伸 10px —— 这意味着右侧和顶部边缘将超出原始 viewBox="0 0 160 160" 的边界（最大 x=160, y=0），从而被强制裁剪，形成生硬的“方角截断”。
关键认知：SVG 没有 stroke-align: inner 或 padding-like 描边机制。stroke-linecap 和 stroke-linejoin 仅控制端点与转角样式，无法改变描边相对于路径的几何定位。因此，“让描边向内生长”的需求在标准 SVG 中不可行；唯一健壮的方案是预留足够画布空间。
✅ 正确做法：扩展 viewBox
将 viewBox="0 0 160 160" 改为 viewBox="-10 -10 170 170" —— 即在 x、y 方向各外扩 10px（等于 stroke-width / 2），确保描边完全可见：
<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="10s"
from="0 0 0"
to="360 0 0"
repeatCount="indefinite" />
</svg>? 计算公式（推荐）：
若原始图形尺寸为 W × H，描边宽度为 sw，则安全的 viewBox 应设为：
viewBox="-sw/2 -sw/2 (W + sw) (H + sw)"
本例中：W = H = 160, sw = 20 → -10 -10 170 170
⚠️ 注意事项：
- 不要依赖 overflow: visible：SVG 元素默认 overflow: hidden，且 overflow: visible 在部分浏览器中对
- 避免盲目缩放 r：减小圆半径虽能“避开”裁剪，但会破坏设计比例，且动画旋转中心偏移可能引发布局错位。
- 动画 transform 不影响 viewBox 计算：animateTransform 作用于整个
，其描边溢出仍由初始 viewBox 决定，因此必须在定义阶段预留空间。
总结：SVG 描边溢出问题本质是坐标系容错不足。通过科学扩展 viewBox，既保持图形语义完整性，又确保高 stroke-width 下的视觉准确性和动画稳定性——这是 SVG 动效开发中一项基础却常被忽视的关键实践。
