之前在做SVG动画中遇到的问题:在SVG动画效果中,怎么让一个圆围绕另一个动态圆转动,即比如太阳系转动,地球围着太阳转,月球围着地球转,卫星围着地球转。
之后发现可以通过嵌套的方式来达到目的:
先看代码
<!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>
</body>
</html>
即可完成所要效果
那么如果是没有嵌套的话,那么效果使会围绕着固定点转动,即地球围绕着太阳转。