动态创建 SVG 元素并立即调用 beginElement() 时，动画可能因浏览器未完成重绘而失效；通过 requestAnimationFrame 延迟动画启动，可确保元素已挂载到 DOM 并触发渲染流程，从而稳定执行动画。
动态创建 svg 元素并立即调用 `beginelement()` 时，动画可能因浏览器未完成重绘而失效；通过 `requestanimationframe` 延迟动画启动，可确保元素已挂载到 dom 并触发渲染流程，从而稳定执行动画。
在 Web 开发中，动态向 SVG 添加 circ.append(anim) 和 test.append(circ) 在同一 JS 任务中快速执行后，浏览器尚未完成样式计算、布局（layout）与绘制（paint），此时调用 anim.beginElement() 实际作用于一个“尚未进入渲染树”的动画节点，导致动画被静默忽略。
解决方案是将 beginElement() 的调用推迟至下一次重绘周期开始前，即使用 requestAnimationFrame（RAF）：
function anim() {
const circ = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circ.setAttribute("class", "ball");
circ.setAttribute("cx", "0"); // 注意：字符串值更安全
circ.setAttribute("cy", "0");
circ.setAttribute("r", "10"); // 显式设置半径（避免 CSS 依赖）
const anim = document.createElementNS("http://www.w3.org/2000/svg", "animateTransform");
anim.setAttribute("attributeName", "transform");
anim.setAttribute("type", "translate");
anim.setAttribute("begin", "indefinite");
anim.setAttribute("from", "0,0");
anim.setAttribute("to", "300,300");
anim.setAttribute("dur", "2s");
anim.setAttribute("repeatCount", "1");
// 推荐：使用 'animationend' 而非已废弃的 'endEvent'
anim.addEventListener("animationend", (e) => {
e.target.parentElement?.remove();
});
// 关键修复：将 DOM 插入与 beginElement 均置于 RAF 回调中
requestAnimationFrame(() => {
circ.append(anim);
test.append(circ);
anim.beginElement(); // 此时 circ 已渲染，动画可正常启动
});
}
const test = document.querySelector("#test");
test.addEventListener("mouseenter", anim);
⚠️ 注意事项与最佳实践：
-
避免
endEvent：该事件已在 SVG 2 规范中被弃用，应改用标准的animationend（注意：需确保attributeName="transform"与type="translate"配置正确，否则事件可能不触发）； -
属性值类型：
cx/cy/r等数值属性建议传入字符串（如"0"），而非数字，以兼容 SVG 的 XML 属性解析逻辑； -
性能考量：频繁触发
mouseenter可能产生大量动画节点，建议添加节流（throttle）或限制并发动画数； -
兼容性兜底：极少数场景下 RAF 仍不可靠，可叠加
setTimeout(..., 0)作为后备，但通常 RAF 已足够。
通过这一微小但关键的时序调整，SVG 动画即可在所有主流浏览器中稳定、即时地响应用户交互——无需 polyfill，不增加额外依赖，纯粹遵循浏览器渲染机制的设计哲学。
