svg制作风车旋转

首先用ai画一个简单的风车

例如：

svg制作风车旋转

svg代码：

<animateTransform
	attributeName="transform" 
	begin="0s" 
	dur="2s" 
	type="rotate" 
	from="0 305 225.5" 
	to="360 305 225.5" 
	repeatCount="indefinite"
	/>

接下来看完整的代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		svg{
			width: 500px;
			height: 800px;
			border: 1px solid #ccc;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" 
	 viewBox="0 0 640 782.8" style="enable-background:new 0 0 640 782.8;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#94E1FF;stroke:#000000;stroke-miterlimit:10;}
	.st1{fill:#FF7FB3;stroke:#000000;stroke-miterlimit:10;}
	.st2{fill:#4BFF2A;stroke:#000000;stroke-miterlimit:10;}
	.st3{fill:#C0FF7F;stroke:#000000;stroke-miterlimit:10;}
	.st4{fill:#FFF83F;stroke:#000000;stroke-miterlimit:10;}
	.st5{fill:#55DEFF;stroke:#000000;stroke-miterlimit:10;}
	.st6{fill:#0048FF;stroke:#000000;stroke-miterlimit:10;}
	.st7{fill:#0022FF;stroke:#000000;stroke-miterlimit:10;}
	.st8{fill:#CB00FF;stroke:#000000;stroke-miterlimit:10;}
	.st9{fill:#170094;stroke:#000000;stroke-miterlimit:10;}
	.st10{fill:#FF15F7;stroke:#000000;stroke-miterlimit:10;}
	.st11{fill:#E9008F;stroke:#000000;stroke-miterlimit:10;}
	.st12{fill:#559DFF;stroke:#000000;stroke-miterlimit:10;}
</style>
<rect />
<g>
	<ellipse />
	<ellipse />
	<ellipse />
	<ellipse />
	<ellipse />
	<ellipse />
	<ellipse />
	<ellipse />
	<ellipse />
	<ellipse />
	<ellipse />
	<ellipse />
	<animateTransform
			attributeName="transform" 
			begin="0s" 
			dur="2s" 
			type="rotate" 
			from="0 305 225.5" 
			to="360 305 225.5" 
			repeatCount="indefinite"
			/>
</g>
<circle />
</svg>

</body>
</html>

效果图：

svg制作风车旋转