HTML5中 svg的animateTransform中rotate类型中围绕点设定

最新推荐文章于 2024-04-17 12:38:13 发布

向光奔跑

最新推荐文章于 2024-04-17 12:38:13 发布

阅读量6.2k

点赞数 2

文章标签： html5 svg 动画

本文链接：https://blog.csdn.net/itslz/article/details/52506985

版权

之前在做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>

即可完成所要效果

那么如果是没有嵌套的话，那么效果使会围绕着固定点转动，即地球围绕着太阳转。

向光奔跑

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
HTML5中 svg的animateTransform中rotate类型中围绕点设定

之前在做SVG动画中遇到的问题：在SVG动画效果中，怎么让一个圆围绕另一个动态圆转动，即比如太阳系转动，地球围着太阳转，月球围着地球转，卫星围着地球转。之后发现可以通过嵌套的方式来达到目的：先看代码 <animateTransform attributeName="transform" from ="0
复制链接

扫一扫