SVG动画.animateTransform

1、来自于：SVG之Animation - 前端学习笔记 - SegmentFault.html（https://segmentfault.com/a/1190000009371194）

2、AnimateTransform.html（UTF8）

　　ZC：下面的属性（type="scale" from="1" to="4 2"），实际等价于（type="scale" from="1 1" to="4 2"） ∵scale是2个参数，（from="1"）是省略了一个参数。

　　ZC：同样（type="rotate" from="0" to="45"） 也是省略了参数，但是 在写 图形的属性的时候 rotate是以 SVG的(0,0)坐标为中心的，这里 同样是这样的...（可以观察第二个矩形的变化）

　　2.1、测试代码

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
</head>

<body>

    <svg width="800" height="600" viewBox="-400 -300 800 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
        <!--矩形中心 == SVG的(0,0)点-->
        <rect x="-10" y="-10" width="20" height="20" style="fill: #ff9; stroke: black;">
            <animateTransform id="a1" attributeName="transform" attributeType="XML" type="scale" from="1" to="4 2" additive="sum" begin="0s" dur="4s" fill="freeze"></animateTransform>
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="45" additive="sum" begin="a1.end" dur="4s" fill="freeze"></animateTransform>
        </rect>

        <!--矩形中心 != SVG的(0,0)点-->
        <rect x="20" y="20" width="20" height="20" style="fill: #ff9; stroke: black;">
            <animateTransform id="a1" attributeName="transform" attributeType="XML" type="scale" from="1" to="4 2" additive="sum" begin="0s" dur="4s" fill="freeze"></animateTransform>
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="45" additive="sum" begin="a1.end" dur="4s" fill="freeze"></animateTransform>
        </rect>
    </svg>

</body>
</html>

 

3、

4、

5、

 

posted @ 2018-02-02 16:25  HtmlUI  阅读(904)  评论(0)  编辑  收藏  举报