SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML语言，可以用来创建动态而且交互性强的图形效果。在SVG中，我们可以使用路径动画和描边动画来实现各种吸引人的动画效果。本篇博客将介绍如何使用这些技术，并通过JavaScript来控制动画的播放。
路径动画
路径动画是指在SVG中沿指定路径移动元素的动画效果。以下是一个简单的例子：
<svg width="300" height="300">
<path id="path" d="M50,50 C100,200 200,0 250,250" fill="none" stroke="black"/>
<circle cx="50" cy="50" r="10" id="circle" fill="red">
<animateMotion dur="5s" repeatCount="indefinite">
<mpath href="#path"/>
</animateMotion>
</circle>
</svg>
在上面的例子中，<path> 元素定义了一个曲线路径，<circle> 元素代表一个圆，<animateMotion> 元素定义了动画的时间和重复次数，<mpath> 元素将动画绑定到路径上。
你可以通过改变<animateMotion> 元素的dur 属性来控制动画的持续时间，通过repeatCount 属性来控制动画的重复次数。
描边动画
描边动画是指改变SVG图形的描边样式的动画效果。以下是一个简单的例子：
<svg width="300" height="300">
<circle cx="150" cy="150" r="100" fill="none" stroke="#000">
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" from="0,314" to="314,0"/>
</circle>
</svg>
在上面的例子中，<circle> 元素代表一个圆，<animate> 元素定义了动画的时间、重复次数、起始值和结束值。
attributeName 属性用来指定要改变的属性，dur 属性用来控制动画的持续时间，repeatCount 属性用来控制动画的重复次数。
JavaScript控制
除了使用<animate> 元素来控制动画外，我们还可以使用JavaScript来控制SVG动画。以下是一个例子：
<svg width="300" height="300">
<circle id="circle" cx="150" cy="150" r="100" fill="blue">
</circle>
</svg>
<script>
const circle = document.getElementById('circle');
circle.addEventListener('click', function() {
circle.style.animation = 'rotation 2s linear infinite';
});
</script>
在上面的例子中，我们使用了一个<circle> 元素代表一个圆，通过给圆添加click 事件监听器，当点击圆时，将给圆添加一个旋转的动画。
通过CSS的animation 属性，我们可以定义动画的名称、持续时间、动画速度和重复次数。
以上只是一些简单的例子，你可以通过查阅更多的SVG和CSS动画的文档来进一步了解如何创建复杂的SVG动画效果。
希望本篇博客对你学习SVG动画设计提供了一些帮助！
