如何在SVG <animate>动画启动后读取属性的实时或最终值？

SVG动画不会修改元素的DOM属性，所以用getAttribute()只能拿到初始值。要获取动画运行中的实时值或最终值，有两种直接的方法：

• 访问属性的animVal属性：SVG元素的几何属性（比如x1、y1）会对应一个属性对象，其中animVal存储了当前动画生效后的实时值，baseVal是初始值。
• 使用getAnimValue()方法：传入属性名即可获取对应的动画值，效果和animVal一致。

修正后的代码示例 #

把你原来的JavaScript代码改成这样，就能拿到实时的x1值：

setInterval(function() {
    console.log(theLine.x1.animVal.value); // 会输出动画过程中的实时值，最终变为110（初始10 + 动画累加的100）
}, 1000);

如果想把动画最终值固化到DOM属性上（类似CSS的commitStyles），可以监听动画结束事件，把animVal的值赋值给元素的DOM属性：

const animateTag = document.querySelector("#theLine animate");
animateTag.addEventListener("endEvent", () => {
    theLine.setAttribute("x1", theLine.x1.animVal.value);
    // 此时再用getAttribute就能拿到最终值了
    console.log(theLine.getAttribute("x1")); // 输出110
});

注意：因为你的动画设置了additive="sum"，最终的x1值是初始10加上动画的最终值100，所以结果是110，不是100。

内容的提问来源于stack exchange，提问作者Eduardo Poço