当 SVG 中使用较粗的 stroke-width 绘制半圆弧时，描边会超出 viewBox 边界而被截断；通过扩大 viewBox 范围（如向四周预留缓冲区）可完美解决此问题，无需缩放图形或修改路径。
当 svg 中使用较粗的 `stroke-width` 绘制半圆弧时，描边会超出 viewbox 边界而被截断；通过扩大 viewbox 范围（如向四周预留缓冲区）可完美解决此问题，无需缩放图形或修改路径。
在 SVG 中绘制带粗描边的圆弧（如半圆）时，一个常见却容易被忽视的问题是：描边被“砍掉”。例如，你用
根本原因在于：SVG 的 viewBox 定义的是可见画布的裁剪区域，所有超出该区域的内容（包括描边的外延部分）均会被裁剪，而非仅对几何路径本身生效。
✅ 正确解法不是缩小半径、也不是改用 stroke-linecap="round"（它只影响端点形状），而是——为描边预留足够空间，即扩大 viewBox 范围。
以下为优化前后的对比与推荐写法：
? 问题示例（描边被裁）：
<svg width="160" height="160" viewBox="0 0 160 160" style="background:#f0f0f0">
<g stroke="black" fill="none" stroke-width="20">
<path d="M 0 80 A 80 80 0 0 1 80 0"/>
</g>
</svg>→ 左侧与顶部描边明显被截断。
? 推荐修复方案（扩大 viewBox）：
为 stroke-width="20" 预留至少 ±10px 缓冲（因描边半宽 = stroke-width / 2），故将 viewBox 从 "0 0 160 160" 改为 "-10 -10 170 170"（即整体平移并扩展）：
<svg width="160" height="160" viewBox="-10 -10 170 170" style="background:#f0f0f0">
<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>? 关键要点总结：
- 描边渲染以路径为中心线，向外延伸 stroke-width / 2，因此 viewBox 必须覆盖整个描边区域；
- 扩大 viewBox 是最简洁、无副作用的方案：不改变路径逻辑、不引入额外元素、兼容所有 stroke-linecap/stroke-linejoin 设置；
- 若需动态适配不同 stroke-width，可按公式计算：viewBox = [cx-r-s/2, cy-r-s/2, 2*(r+s), 2*(r+s)]（其中 r 为弧半径，s 为 stroke-width，cx/cy 为圆心）；
- 切勿依赖 overflow: visible —— SVG 元素默认 overflow="hidden"，且在多数上下文中无法可靠生效。
通过合理设置 viewBox，你既能保持设计精度，又能自由使用任意粗细的描边，让 SVG 动画既美观又健壮。
