SVG set动画未按预期循环 文本元素无法每2秒正常切换

问题原因 #

• 你给单个<set>动画设置了极高的repeatCount属性：单个show2019动画需要重复123456次、总时长达246912秒才会触发end事件，后续绑定在show2019.end上的hide2019等动画根本等不到触发时机，自然会卡在第一步不动。
• <set>是瞬时修改属性的动画标签，不需要用dur控制效果保持时长，你需要的状态停留时长应该通过相邻动画的触发延迟实现。

修复方案 #

移除所有<set>标签的dur和repeatCount属性，调整动画触发时机绑定逻辑，让事件链可以正常循环即可，修复后完整代码如下：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="49" height="64">
    <rect x="0" y="0" width="49" height="64" rx="5" ry="5" stroke="#F00" fill="#FFF" stroke-width="1" />
    <text x="50%" text-anchor="middle" font-family="sans-serif" font-size="9pt" fill="#F00">
        <tspan x="50%" y="1em">Check</tspan>
        <tspan x="50%" y="2em">Terms</tspan>
        <tspan x="50%" y="3em">for</tspan>
    </text>
    <text x="50%" text-anchor="middle" font-family="sans-serif" font-size="9pt" font-weight="bold" fill="#F00" visibility="hidden">
        <tspan x="50%" y="4.5em">2019</tspan>
        <set id="show2019" attributeName="visibility" to="visible" begin="0s;hide2020.end" />
        <set id="hide2019" attributeName="visibility" to="hidden" begin="show2019.begin + 2s" />
    </text>
    <text x="50%" text-anchor="middle" font-family="sans-serif" font-size="9pt" font-weight="bold" fill="#F00" visibility="hidden">
        <tspan x="50%" y="4.5em">2020</tspan>
        <set id="show2020" attributeName="visibility" to="visible" begin="hide2019.begin" />
        <set id="hide2020" attributeName="visibility" to="hidden" begin="show2020.begin + 2s" />
    </text>
</svg>

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