点击按钮触发svg路径动画的关键是设begin="indefinite"并调用beginelement()：必须显式声明该属性，通过getelementbyid获取动画元素后调用beginelement()启动；重复触发需先setcurrenttime(0)再beginelement()。
点击按钮触发 SVG 路径动画，关键在控制 begin 属性和 SVGAnimationElement API
直接用 HTML 按钮控制 SVG 动画，不能靠 CSS 类切换或单纯改 display，得从 SVG 动画的时间模型入手。核心是：动画默认不自动播放（begin="indefinite"），再通过 JS 调用 beginElement() 启动。
begin="indefinite" 是必须加的属性，否则 beginElement() 无效
如果路径动画（如 <animate></animate> 或 <animatemotion></animatemotion>）没设 begin="indefinite"，调用 beginElement() 会静默失败——控制台无报错，但动画就是不动。
- 必须显式写在动画元素上：
<animate begin="indefinite" ...></animate> - 不能依赖默认值，SVG 动画默认
begin="0s"，即加载即播，无法手动触发 - 多个动画要分别设，不能只给父
<g></g>或<svg></svg>加
按钮绑定 JS 时，优先用 getElementById 获取动画元素，别用 querySelector 模糊匹配
querySelector 容易选错节点（比如选到 <path></path> 而非其内部的 <animate></animate>），导致 beginElement() 报 TypeError: beginElement is not a function。
- 给动画元素加唯一
id：<animate id="drawLine" begin="indefinite" ...></animate> - JS 中严格按 ID 获取：
document.getElementById("drawLine").beginElement(); - 确保 DOM 已就绪——脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
