SVG动画自动停止设置与均匀消失实现技术咨询

我来帮你分析并解决这两个问题，先拆解下你当前代码里的核心问题：你的<animate>标签中values="2037;0;2037"的设置，会让动画先完成从右到左的绘制（偏移从2037到0），随后又把偏移拉回初始的2037，这就是动画结束后消失的直接原因；另外默认情况下动画结束后会重置到初始状态，没有保留最后一帧的显示。

问题一：让动画完成后自动停止并保持显示 #

要实现动画结束后停留在绘制完成的状态，需要做两个关键修改：

• 把values调整为只包含绘制过程："实际路径长度;0"，去掉最后的回退值，这样动画只会执行绘制动作，不会反向隐藏。
• 添加fill="freeze"属性，这个属性会强制动画结束后保持最后一帧的状态，不会重置到初始偏移值。

另外我帮你修正了stroke-dasharray和stroke-dashoffset的数值——原代码用的2000和实际路径长度不匹配，会导致动画效果不准确：

• 直线的实际长度是1920-275=1645
• 圆形的周长约为2×π×126≈792（取整）

修改后的单元素动画示例：

<line fill="none" stroke-width="2" stroke="red" stroke-dasharray="1645" stroke-dashoffset="1645" x1="1920" y1="156" x2="275" y2="156">
  <animate id="p1" attributeName="stroke-dashoffset" begin="0.1s" values="1645;0" dur="15s" calcMode="linear" fill="freeze" />
</line>

问题二：实现动画的均匀消失效果 #

如果想要动画先绘制完成，停留一段时间后再匀速消失，可以把values设置为三个阶段：绘制（偏移从实际长度到0）→ 停留（保持0）→ 消失（偏移从0回到实际长度），同时保留calcMode="linear"保证整个过程匀速。

比如设置绘制10秒、停留3秒、消失10秒，总时长23秒，修改后的代码示例：

<circle fill="none" stroke-width="2" stroke="red" stroke-dasharray="792" stroke-dashoffset="792" cx="149" cy="157" r="126">
  <animate id="p2" attributeName="stroke-dashoffset" begin="6.1s" values="792;0;0;792" dur="23s" calcMode="linear" />
</circle>

其中values里的0;0就是停留阶段，两个相同值之间动画会保持当前状态，消失过程就会从完全显示的状态匀速回到隐藏状态，实现均匀消失的效果。

如果不需要停留，直接绘制完成后立刻消失，只需把values改成"实际路径长度;0;实际路径长度"，并调整dur为绘制+消失的总时长即可。

完整修改代码选项 #

选项1：动画完成后停止并保持显示

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 319" style="enable-background:new 0 0 1920 319;" xml:space="preserve">
<g>
<line fill="none" stroke-width="2" stroke="red" stroke-dasharray="1645" stroke-dashoffset="1645" x1="1920" y1="156" x2="275" y2="156">
<animate id="p1" attributeName="stroke-dashoffset" begin="0.1s" values="1645;0" dur="15s" calcMode="linear" fill="freeze" />
</line>
</g>
<g>
<circle fill="none" stroke-width="2" stroke="red" stroke-dasharray="792" stroke-dashoffset="792" cx="149" cy="157" r="126">
<animate id="p2" attributeName="stroke-dashoffset" begin="6.1s" values="792;0" dur="15s" calcMode="linear" fill="freeze" />
</circle>
</g>
</svg>

选项2：绘制完成后均匀消失（带3秒停留）

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 319" style="enable-background:new 0 0 1920 319;" xml:space="preserve">
<g>
<line fill="none" stroke-width="2" stroke="red" stroke-dasharray="1645" stroke-dashoffset="1645" x1="1920" y1="156" x2="275" y2="156">
<animate id="p1" attributeName="stroke-dashoffset" begin="0.1s" values="1645;0;0;1645" dur="23s" calcMode="linear" />
</line>
</g>
<g>
<circle fill="none" stroke-width="2" stroke="red" stroke-dasharray="792" stroke-dashoffset="792" cx="149" cy="157" r="126">
<animate id="p2" attributeName="stroke-dashoffset" begin="6.1s" values="792;0;0;792" dur="23s" calcMode="linear" />
</circle>
</g>
</svg>

内容的提问来源于stack exchange，提问作者knefie