在SVG中，使用SMIL动画可以为图形元素添加动态效果。然而，在需要对多个动画进行独立控制时，直接使用pauseAnimations()和unpauseAnimations()可能会遇到问题，因为它们会影响整个SVG文档中的所有动画。本文将介绍如何更精确地控制SVG中的SMIL动画，包括暂停、启动特定动画，以及优化动画结构以简化控制。
理解pauseAnimations()和unpauseAnimations()的局限性
pauseAnimations()和unpauseAnimations()方法是SVGSVGElement接口提供的，它们分别用于暂停和恢复SVG文档中的所有动画。这意味着，如果你只想控制某个特定元素的动画，这两个方法就显得过于宽泛。
// 暂停SVG文档中的所有动画
document.getElementById("svg").pauseAnimations();
// 恢复SVG文档中的所有动画
document.getElementById("svg").unpauseAnimations();使用ElementTimeControl接口控制单个动画
要实现对单个动画的精确控制，可以使用ElementTimeControl接口。该接口提供了beginElement()和endElement()方法，分别用于启动和停止动画。需要注意的是，这种方式无法在动画的中间状态暂停和恢复，只能控制动画的开始和结束。
// 获取需要控制的动画元素
var poiFront1 = document.getElementById("poi_front_1");
// 启动动画
poiFront1.beginElement();
// 停止动画
poiFront1.endElement();优化动画结构：合并交替动画
在某些情况下，SVG动画可能由多个交替进行的动画组成，例如在提供的代码中，poi_front元素包含两个交替的动画poi_front_1和poi_front_2。为了简化控制，可以将这两个动画合并为一个。
- 合并values属性： 将两个动画的values属性合并为一个，使用分号分隔，形成"...state1...;...state2...;...state1..."的格式。
- 设置keyTimes属性： 为合并后的values属性设置对应的keyTimes属性，确保keyTimes的数量与values的数量一致，并按升序排列，例如"0;0.5;1"。
- 调整dur属性： 将动画的dur属性设置为原始单个动画时长的两倍。
- 设置repeatCount属性： 设置repeatCount="indefinite"，使动画无限循环播放。
- 控制动画的启动方式： 如果希望动画自动播放，则设置begin="0s"。如果希望通过JavaScript控制动画的启动，则设置begin="indefinite"。
以下是修改后的SVG代码示例：
完整示例
SVG Animation Control
注意事项
- 确保你的SVG文档正确引入了SMIL动画所需的命名空间。
- keyTimes属性的值必须与values属性的值一一对应。
- 使用ElementTimeControl接口控制动画时，无法在动画的中间状态暂停和恢复。
- beginElement()和endElement()方法只能在begin属性设置为indefinite的动画上使用。
- 如果希望在动画停止后保持在屏幕上，可以设置fill="freeze"。
总结
通过本文，你学习了如何精确控制SVG中的SMIL动画，包括使用ElementTimeControl接口控制单个动画的启动和停止，以及如何通过优化动画结构来简化控制流程。掌握这些技术可以帮助你创建更复杂、更具交互性的SVG动画。
