SVG动画——缩放、旋转、路径动画

一、SVG动画使用方式

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

二、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">
    <animateMotion
        path="M0 0 C0 300 300 300 300 0"
        dur="5s"
        begin="click"
        fill="freeze"
        rotate="auto"
    />
</rect>
</svg>