svg双重动画的方法

svg双重动画的方法

<p>
    <svg>
        <g>
            <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125">
                <animatetransform attributename="transform" type="scale" from="1 1" to="3 1.25" begin="0s" dur="2s" repeatcount="0"></animatetransform>
            </rect>
            <animatetransform attributename="transform" type="translate" from="0 0" to="150 20" begin="0s" dur="2s" repeatcount="0"></animatetransform>
        </g>
    </svg>
</p>

　　

animatetransform 

标签内只能加1个动画  所以 外面加个g标签。。又可以再加个动画

animate 
标签内只可以加多个动画

<p>
    <svg>
        <rect x="10" y="10" width="200" height="20" stroke="black" fill="none">
            <animate attributename="width" attributetype="XML" from="200" to="20" begin="0s" dur="5s" fill="freeze"></animate>
            <animate attributename="height" attributetype="XML" from="20" to="120" begin="0s" dur="5s" fill="freeze"></animate>
        </rect>
    </svg>
</p>

 

ps:圆形锚点在中心   其他都是左上角