描边动画是SVG里最实用的效果之一，进度环、加载动画、数据可视化仪表盘都离不开它。但一旦把圆改成半圆，问题就来了：不少人发现动画播放到末尾时，最后几像素的弧线死活画不出来，或者路径起点的位置凭空多出一个线头，整个半圆看起来像被硬生生截断了一截。这篇文章就把这个问题的成因拆开讲清楚，并给出几种经过验证的解决方案。
为什么半圆描边会出现截断
要理解截断的成因，先得明白描边动画的核心机制。描边动画本质上靠的是stroke-dasharray和stroke-dashoffset两个属性配合：前者把描边切分成一段段虚线，后者控制虚线的起始偏移量。经典做法是把stroke-dasharray设为路径总长度，再把stroke-dashoffset从路径总长度动画到0，看起来就像一支笔沿路径画线。
问题往往出在长度值不够精确。很多人画半圆时随手写个大概数字，比如周长按3.14估算，但stroke-dasharray的取值如果小于真实路径长度，动画结束时就会有一小段弧线永远处于虚线间隔里，呈现出来就是末尾缺一块。反过来，如果取值大于真实长度，动画起点又会提前透出一截线头。
另一个容易被忽视的因素是stroke-linecap的默认值是butt，即平头端点。平头端点在路径端点处不向外延伸，而半圆的起止点恰好落在圆的水平直径两端，浏览器在光栅化时对这些端点做亚像素处理，可能出现半个像素的缺失，视觉上同样表现为截断感。把stroke-linecap改成round之后，圆头端点会向外延伸半个线宽，通常能直接掩盖这类亚像素误差。
精确获取半圆路径长度的几种方法
最可靠的方式是让浏览器自己告诉你长度。getTotalLength是SVG路径元素的接口，返回值精确到浮点数，不需要你手动估算。配合一点JS就能把参数动态写入：
const path = document.querySelector('#semi-arc');
const len = path.getTotalLength();
path.style.strokeDasharray = len;
path.style.strokeDashoffset = len;
// 下一帧触发动画
requestAnimationFrame(() => {
path.style.transition = 'stroke-dashoffset 1.5s ease';
path.style.strokeDashoffset = '0';
});这种动态取值的方式优点是完全适配任何半径、任何弧度的路径，后续改设计稿也不用重新算数。缺点是依赖JS，如果项目要求纯CSS实现，就需要手动计算。半圆弧长有固定公式：半径为r的半圆，弧长等于πr。假设半径是80，弧长约为251.33，此时建议在计算结果上再加一点余量，比如写成stroke-dasharray="253"、stroke-dashoffset动画目标设为略小于253的值，配合圆头端点就能避免截断。
还有一种思路是把半圆补成完整圆再做动画。完整圆的周长是2πr，路径起止点重合，不存在开放端点，动画结束时线条自然闭合成环，视觉上不会有缺口。如果你需要的就是半圆效果，可以用另一个元素盖住不需要的那一半，或者用clip-path裁剪，曲线闭合带来的稳定性比开放路径更好。
绘制半圆路径时d属性的写法细节
半圆的path写法看起来简单，其实暗藏玄机。常见的写法是用M命令移动到起点，再用A命令画弧：
<path d="M 20 100 A 80 80 0 0 1 180 100"
fill="none" stroke="#3b82f6" stroke-width="8"
stroke-linecap="round"/>这条路径从坐标(20,100)出发，以半径80画一段弧到(180,100)，sweep-flag为1表示顺时针，从左端点画到右端点正好是上半圆。这里要特别注意A命令的两个圆心角标志位：large-arc-flag为0时画的是小弧，为1时画大弧。半圆恰好是180度，属于边界情况，两个标志位都可能命中，某些旧版渲染引擎在处理180度整弧时会有微小的长度偏差，这也是截断问题偶发的来源之一。
规避办法是把弧度略微错开，比如画181度或179度，起止点的横坐标稍微不对称，让浏览器走出边界状态。另一个细节是起点命令：如果用小写的m做相对移动，或者路径中混入了多余的L命令，都可能让getTotalLength返回的长度与你预期的弧长不一致，动画计算自然跟着出错。写完路径后打印一下getTotalLength()的返回值，和手算的πr对比，是最快的自查手段。
动画实现方式的选择与兼容处理
CSS动画和SMIL动画在描边效果上的表现并不完全一致。CSS方式通过transition或animation驱动stroke-dashoffset，性能好、写法直观，是现在的主流选择；SMIL方式的<animate>标签虽然不需要JS，但在部分新版浏览器中已被标记为弃用，新项目不建议依赖。
用CSS实现时还有一个坑：stroke-dashoffset的初始值如果直接写在CSS里而数字取整过，动画可能从中间某一帧才开始播。推荐的做法是把初始隐藏状态也用JS按精确长度设置，或者用CSS变量传递长度值，保证dasharray和dashoffset两个数字来源一致：
:root {
--arc-len: 251.33;
}
#semi-arc {
stroke-dasharray: var(--arc-len);
stroke-dashoffset: var(--arc-len);
animation: draw 1.5s ease forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}最后补几个排查经验：动画结束后弧线末尾仍缺一点，先检查stroke-linecap是否为butt，改成round立竿见影；出现回退动画（先画出来又缩回去）通常是animation-fill-mode没设forwards；路径在高分屏上抖动，可以给外层svg加上shape-rendering="geometricPrecision"提升渲染精度。把这些细节都照顾到，半圆描边动画就能稳定流畅地跑在各种设备上了。
SVG描边动画stroke-dasharray路径截断修改时间：2026-09-05 17:37:16