SVG animate元素缓动效果失效：添加keySplines等属性仍无效

嘿，我之前也踩过这个坑！SVG的animate缓动属性不生效，绝大多数情况都是几个容易忽略的细节没做好，咱们一个个来排查：

1. 必须设置calcMode="spline" #

这是最常见的问题！keySplines只有在动画的计算模式设为spline时才会起作用，默认的calcMode是linear，这时候不管你写多少keySplines都没用。

举个正确的示例：

<circle cx="100" cy="100" r="20" fill="blue">
  <animate
    attributeName="cx"
    values="100; 300; 100"
    keyTimes="0; 0.5; 1"
    keySplines="0.42 0 0.58 1; 0.17 0.89 0.32 1.28"
    calcMode="spline" <!-- 这行绝对不能少！ -->
    dur="3s"
    repeatCount="indefinite"
  />
</circle>

2. 确保属性数量匹配 #

• values的数值个数必须和keyTimes的数值个数完全一致（比如上面例子里都是3个值）
• keySplines的段数要等于keyTimes的数量减1（每两个关键时间点对应一段缓动曲线）。比如keyTimes有3个值，keySplines就要有2组4个数字的参数，用分号分隔。

3. 检查keySplines的格式 #

每组缓动参数是四个数字（对应贝塞尔曲线的两个控制点），用空格分隔；不同组之间用分号分隔，不能有多余的标点或者格式错误。比如：

• 正确：keySplines="0.42 0 0.58 1; 0.17 0.89 0.32 1.28"
• 错误：keySplines="0.42,0,0.58,1; 0.17,0.89,0.32,1.28"（用了逗号分隔）

4. 动态创建元素时注意命名空间 #

如果是用JS动态生成SVG animate元素，必须使用SVG命名空间（http://www.w3.org/2000/svg）创建元素，否则会创建HTML的animate元素，SVG属性自然不生效。示例代码：

// 正确创建SVG animate元素
const anim = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
anim.setAttribute('calcMode', 'spline'); // 别忘了设置这个！
anim.setAttribute('attributeName', 'cy');
anim.setAttribute('values', '100; 180; 100');
anim.setAttribute('keyTimes', '0; 0.5; 1');
anim.setAttribute('keySplines', '0.25 0.1 0.25 1; 0.75 0.1 0.75 1');
anim.setAttribute('dur', '2s');
anim.setAttribute('repeatCount', 'indefinite');

按照这几点排查，基本就能解决缓动不生效的问题啦！

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