SVG使用animateMotion做步进动画calcMode=discrete不生效求解

问题原因 #

你为animateMotion设置calcMode="discrete"后仍出现插值过渡，是因为没有显式指定与路径顶点一一对应的关键帧映射规则：animateMotion的离散模式默认按路径总长度均匀切分步长，不会自动匹配你路径定义里的每个拐点位置。

解决方法 #

需要给animateMotion补充keyPoints和keyTimes两个属性，手动指定动画每一步要跳转到的路径位置以及对应的时间节点：

• keyPoints：定义每一步落点在路径上的归一化位置（取值范围0~1，0为路径起点，1为终点），值之间用分号分隔，数量和路径顶点数一致
• keyTimes：定义每一步跳转对应的时间节点（取值范围0~1，0为动画开始，1为动画结束），数量和keyPoints完全匹配

你的路径一共有14个顶点，对应13个步长间隔，修改后的完整代码如下：

<svg viewBox="0 0 15 21" fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d="M 3 1 4 1 5 1 6 1 7 1 7 2 7 3 7 4 8 4 9 4 10 4 11 4 11 5 11 6" id='p1'/>
<rect width='1' height='1' fill='#000'>
    <animateMotion 
        dur="14s" 
        begin="0s" 
        calcMode='discrete'  
        fill="freeze"
        keyPoints="0;0.077;0.154;0.231;0.308;0.385;0.462;0.538;0.615;0.692;0.769;0.846;0.923;1"
        keyTimes="0;0.077;0.154;0.231;0.308;0.385;0.462;0.538;0.615;0.692;0.769;0.846;0.923;1"
    >
       <mpath href="#p1"/>
    </animateMotion>
</rect>
</svg>

如果要保持你第二份代码的7s时长，只需要把dur属性改为7s即可，步进逻辑不会变。

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