一、SVG动画使用方式

创建动画，告诉动画标记哪个元素需要执行动画创建元素，在元素中说明需要执行什么动画

二、SVG动画属性

attributeType：CSS/XML规定的属性值的名称空间attributeName：规定元素的哪个属性会产生动画效果from/to：从哪到哪dur：动画时长fill：动画结束之后的状态，保持freeze结束状态/remove回复初始状态

1、缩放

缩放动画半径50到100变化的圆

cx/cy：表示圆心位置

r：圆的半径

<svg width="1800" height="800"><circle cx="500" cy="300" r="100"><animate attributeName="r" repeatCount="indefinite" attributeType="XML" from="50" to="100" dur="2"fill="freeze"></animate></circle></svg>

2.旋转

<svg width="800" height="800"><rect x="300" y="300" width="300" height="300" fill="blue"><animateTransform attributeName="transform" repeatCount="indefinite" type="rotate" from="0 300 300"to="360 300 300" dur="5"></animateTransform></rect></svg>

3、路径动画

<svg width="500" height="500" viewBox="-100 -100 500 500"><path d="M0 0 C0 300 300 300 0" stroke="red" stoke-width="2" fill="none"></path><rect x="0" y="0" width="40" height="40" fill="lightgreen"><animateMotionpath="M0 0 C0 300 300 300 300 0"dur="5s"begin="click"fill="freeze"rotate="auto"/></rect></svg>