24
2018
02

SVG animateTransform 旋转动画

 

<!DOCTYPE html>
<html>

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

<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="800" height="600">
        <circle cx="300" cy="300" r="50" fill="red"></circle>
        <g>
            <circle cx="100" cy="300" r="20" fill="blue"></circle>
            <g>
                <circle cx="50" cy="300" r="10" fill="yellow"></circle>
                <animateTransform attributeName="transform" from="0 100 300 " to="360 100 300 " type="rotate" begin="0s" dur="10s" repeatCount="indefinite">
                </animateTransform>
            </g>
            <g>
                <circle cx="130" cy="300" r="5" fill="green"></circle>
                <animateTransform attributeName="transform" from="0 100 300 " to="360 100 300 " type="rotate" begin="0s" dur="3s" repeatCount="indefinite">
                </animateTransform>
            </g>
            <animateTransform attributeName="transform" from="0 300 300 " to="360 300 300 " type="rotate" begin="0s" dur="20s" repeatCount="indefinite">
            </animateTransform>
        </g>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
        <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
        <g>
            <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
            </circle>
            <animateTransform attributeName="transform" type="translate" from="0 20" to="360 20" dur="10s" />
        </g>
    </svg>
</body>

</html>


SVG旋转.html



« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。