关于如何制作svg动画。

今日发现有同事做一个动画，是把svg放在div里面，然后给div加动画，来做一个loading的效果。 然后这样的话，在重复使用上，应用起来会很麻烦，所以研究了一下在svg里面加动画效果。

1.animateTransform

这个属性是可以用来设置svg动画的。 里面有一个form 和 to 属性。 第一个参数是代表转动的幅度。 第二个和第三个参数是用来代表转动的中心点位置。

<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
	<circle cx="20.165" cy="20.165" r="20.165" fill="#F8BBD0"/>
	<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20C12 15.5817 15.5817 12 20 12C24.4183 12 28 15.5817 28 20C28 24.4183 24.4183 28 20 28C15.5817 28 12 24.4183 12 20ZM26.7694 20C26.7694 16.2615 23.7387 13.2308 20.0002 13.2308C16.2616 13.2308 13.231 16.2615 13.231 20C13.231 23.7386 16.2616 26.7693 20.0002 26.7693C23.7387 26.7693 26.7694 23.7386 26.7694 20Z" fill="white"/>
	<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0781 13.6925C16.4354 12.632 18.1437 12 19.9997 12C21.8553 12 23.5634 12.6318 24.9206 13.692L24.078 14.5967C22.9438 13.7393 21.5312 13.2308 19.9999 13.2308C18.4681 13.2308 17.0552 13.7396 15.9208 14.5973L15.0781 13.6925Z" fill="#37519B">
	</path>
</svg>

如果我们要给上面的这个svg 加一个转动的动画。我们可以在第二个path里面加一个animateTransform，让它围绕着这张图的中心点来做360度的旋转。

<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
	<circle cx="20.165" cy="20.165" r="20.165" fill="#F8BBD0"/>
	<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20C12 15.5817 15.5817 12 20 12C24.4183 12 28 15.5817 28 20C28 24.4183 24.4183 28 20 28C15.5817 28 12 24.4183 12 20ZM26.7694 20C26.7694 16.2615 23.7387 13.2308 20.0002 13.2308C16.2616 13.2308 13.231 16.2615 13.231 20C13.231 23.7386 16.2616 26.7693 20.0002 26.7693C23.7387 26.7693 26.7694 23.7386 26.7694 20Z" fill="white"/>
	<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0781 13.6925C16.4354 12.632 18.1437 12 19.9997 12C21.8553 12 23.5634 12.6318 24.9206 13.692L24.078 14.5967C22.9438 13.7393 21.5312 13.2308 19.9999 13.2308C18.4681 13.2308 17.0552 13.7396 15.9208 14.5973L15.0781 13.6925Z" fill="#37519B">
		<animateTransform 
		 attributeName="transform" 
		 attributeType="XML" 
		 type="rotate"
		 dur="1s" 
		 from="0 20 20"
		 to="360 20 20" 
		 repeatCount="indefinite" />
	</path>
</svg>

加上这个代码就可以让这个spinner转动起来。