SVG实现动画效果

SVG中提供三种常用动画标记
        <animate> 基础动画
        <animateTransform> 形变动画
        <animateMotion> 路径动画

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

SVG动画属性

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

基本图形 

x:水平坐标轴

y：垂直坐标轴

rx:矩形圆角是r为半径画的圆

cx:圆形的中心点x轴坐标

cy:圆形的中心点y轴坐标

r:圆形的半径

fill：填充颜色

1.矩形

<svg width="500" height="500">
        <rect x="30" y="30" width="200" height="100" fill="none" stroke="green" stroke-width="5" rx="50" ry="100"></rect>
</svg>

效果：

2.圆形

<circle cx="300" cy="300" r="100" fill="red" stroke="green" stro