SVG 半圆描边动画中避免路径截断的解决方案

当 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 动画开发中最基础也最关键的布局意识之一。