svg对象围绕圆旋转

问题描述 投票：0回答：1

我想用SVG和CSS制作一些动画。我创建一个圆和对象。这些对象应该绕着圆圈旋转，而不用eachother。]旋转。

这里是我关于问题的gif。如您所见，它绕圆旋转，但是它也会旋转。我不需要自己旋转。如何用CSS解决问题？我还要在下面分享我的CSS。

enter image description here

#techs {
  animation: rotate 10s infinite linear;
  transform-origin: center;
  transform-box: fill-box;
}
#moving-objects {
  animation: scale 15s infinite;
  transform-origin: center;
}
#certel {
  animation: action 1s infinite alternate;
}
@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(-360deg);
  }
}
@keyframes scale {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
	 height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g id="group-objects">
	<circle id="circle" fill="#FFF5EC" cx="252.469" cy="247.273" r="181.496"/>
	<g id="moving-objects">
		<g>
			<path fill="#EDDCCE" d="M441.256,211.514c-3.053,0-5.537-2.484-5.537-5.538c0-3.054,2.484-5.539,5.537-5.539
				c3.055,0,5.539,2.484,5.539,5.539C446.795,209.029,444.311,211.514,441.256,211.514z M441.256,203.097
				c-1.586,0-2.877,1.291-2.877,2.878c0,1.587,1.291,2.878,2.877,2.878c1.588,0,2.879-1.291,2.879-2.878
				C444.135,204.388,442.844,203.097,441.256,203.097z"/>
		</g>
		<g>
			<path fill="#EDDCCE" d="M317.575,78.994c-3.053,0-5.537-2.484-5.537-5.539c0-3.054,2.484-5.538,5.537-5.538
				c3.055,0,5.539,2.484,5.539,5.538C323.114,76.51,320.63,78.994,317.575,78.994z M317.575,70.578
				c-1.586,0-2.877,1.291-2.877,2.878c0,1.587,1.291,2.878,2.877,2.878c1.587,0,2.879-1.291,2.879-2.878
				C320.454,71.869,319.162,70.578,317.575,70.578z"/>
		</g>
		<g>
			<path fill="#EDDCCE" d="M239.864,96.977c-3.054,0-5.539-2.484-5.539-5.538s2.484-5.538,5.539-5.538
				c3.053,0,5.538,2.484,5.538,5.538S242.917,96.977,239.864,96.977z M239.864,88.561c-1.587,0-2.878,1.291-2.878,2.878
				s1.291,2.878,2.878,2.878c1.586,0,2.877-1.291,2.877-2.878S241.451,88.561,239.864,88.561z"/>
		</g>
		<g>
			<path fill="#EDDCCE" d="M126.698,113.881c-3.053,0-5.538-2.484-5.538-5.538s2.484-5.538,5.538-5.538
				c3.054,0,5.539,2.484,5.539,5.538S129.752,113.881,126.698,113.881z M126.698,105.465c-1.586,0-2.878,1.291-2.878,2.878
				s1.292,2.878,2.878,2.878c1.587,0,2.878-1.292,2.878-2.878S128.286,105.465,126.698,105.465z"/>
		</g>
		<g>
			<path fill="#EDDCCE" d="M68.601,313.334c-3.054,0-5.539-2.484-5.539-5.537c0-3.054,2.484-5.538,5.539-5.538
				c3.054,0,5.538,2.484,5.538,5.538C74.139,310.85,71.655,313.334,68.601,313.334z M68.601,304.919
				c-1.587,0-2.878,1.291-2.878,2.878c0,1.586,1.291,2.877,2.878,2.877c1.586,0,2.878-1.291,2.878-2.877
				C71.479,306.21,70.188,304.919,68.601,304.919z"/>
		</g>
		<g>
			<path fill="#EDDCCE" d="M142.453,371.532c-3.054,0-5.538-2.484-5.538-5.538s2.484-5.538,5.538-5.538
				c3.054,0,5.539,2.484,5.539,5.538S145.507,371.532,142.453,371.532z M142.453,363.116c-1.587,0-2.878,1.291-2.878,2.878
				s1.291,2.878,2.878,2.878c1.587,0,2.878-1.291,2.878-2.878S144.04,363.116,142.453,363.116z"/>
		</g>
		<g>
			<path fill="#EDDCCE" d="M428.216,293.577c-3.054,0-5.538-2.484-5.538-5.538s2.484-5.538,5.538-5.538s5.537,2.484,5.537,5.538
				S431.27,293.577,428.216,293.577z M428.216,285.161c-1.587,0-2.878,1.291-2.878,2.878s1.291,2.879,2.878,2.879
				c1.586,0,2.878-1.292,2.878-2.879S429.802,285.161,428.216,285.161z"/>
		</g>
		<g>
			<path fill="#EDDCCE" d="M188.008,247.444c-3.054,0-5.538-2.484-5.538-5.539c0-3.053,2.484-5.538,5.538-5.538
				s5.538,2.484,5.538,5.538C193.546,244.96,191.062,247.444,188.008,247.444z M188.008,239.028c-1.587,0-2.878,1.291-2.878,2.877
				c0,1.587,1.291,2.878,2.878,2.878s2.878-1.291,2.878-2.878C190.886,240.319,189.595,239.028,188.008,239.028z"/>
		</g>
		<g>
			<path fill="#EDDCCE" d="M118.279,205.126c-3.054,0-5.538-2.484-5.538-5.539s2.484-5.538,5.538-5.538s5.538,2.484,5.538,5.538
				S121.333,205.126,118.279,205.126z M118.279,196.709c-1.587,0-2.878,1.292-2.878,2.878c0,1.587,1.291,2.878,2.878,2.878
				s2.878-1.291,2.878-2.878C121.157,198,119.866,196.709,118.279,196.709z"/>
		</g>
		<path fill="#EDDCCE" d="M184.725,82.636h-2.011v-2.01c0-0.735-0.595-1.33-1.33-1.33s-1.33,0.595-1.33,1.33v2.01h-2.011
			c-0.735,0-1.33,0.596-1.33,1.33c0,0.735,0.595,1.33,1.33,1.33h2.011v2.011c0,0.735,0.595,1.33,1.33,1.33s1.33-0.595,1.33-1.33
			v-2.011h2.011c0.735,0,1.33-0.595,1.33-1.33C186.055,83.232,185.46,82.636,184.725,82.636z"/>
		<path fill="#EDDCCE" d="M61.217,239.854h-2.011v-2.011c0-0.735-0.595-1.33-1.33-1.33c-0.734,0-1.33,0.595-1.33,1.33v2.011h-2.011
			c-0.734,0-1.33,0.595-1.33,1.33c0,0.735,0.595,1.33,1.33,1.33h2.011v2.011c0,0.735,0.596,1.33,1.33,1.33
			c0.735,0,1.33-0.595,1.33-1.33v-2.011h2.011c0.734,0,1.33-0.595,1.33-1.33C62.547,240.45,61.952,239.854,61.217,239.854z"/>
		<path fill="#EDDCCE" d="M378.659,364.938h-2.012v-2.011c0-0.734-0.595-1.33-1.33-1.33c-0.734,0-1.33,0.596-1.33,1.33v2.011h-2.01
			c-0.735,0-1.33,0.596-1.33,1.33c0,0.735,0.595,1.33,1.33,1.33h2.01v2.012c0,0.734,0.596,1.329,1.33,1.329
			c0.735,0,1.33-0.595,1.33-1.329v-2.012h2.012c0.734,0,1.33-0.595,1.33-1.33C379.989,365.534,379.394,364.938,378.659,364.938z"/>
		<path fill="#EDDCCE" d="M324.2,249.286h-2.011v-2.011c0-0.734-0.596-1.33-1.33-1.33c-0.735,0-1.33,0.596-1.33,1.33v2.011h-2.011
			c-0.734,0-1.33,0.595-1.33,1.33c0,0.734,0.596,1.33,1.33,1.33h2.011v2.011c0,0.735,0.595,1.33,1.33,1.33
			c0.734,0,1.33-0.595,1.33-1.33v-2.011h2.011c0.735,0,1.33-0.596,1.33-1.33C325.53,249.881,324.936,249.286,324.2,249.286z"/>
		<path fill="#EDDCCE" d="M123.656,255.197h-2.011v-2.011c0-0.734-0.595-1.33-1.33-1.33c-0.734,0-1.33,0.596-1.33,1.33v2.011h-2.01
			c-0.735,0-1.33,0.596-1.33,1.33s0.595,1.33,1.33,1.33h2.01v2.011c0,0.735,0.596,1.33,1.33,1.33c0.735,0,1.33-0.595,1.33-1.33
			v-2.011h2.011c0.735,0,1.33-0.596,1.33-1.33S124.391,255.197,123.656,255.197z"/>
		<path fill="#EDDCCE" d="M73.908,143.06h-2.011v-2.011c0-0.735-0.595-1.33-1.33-1.33s-1.33,0.595-1.33,1.33v2.011h-2.011
			c-0.734,0-1.33,0.595-1.33,1.33c0,0.735,0.596,1.33,1.33,1.33h2.011v2.011c0,0.735,0.595,1.33,1.33,1.33s1.33-0.595,1.33-1.33
			v-2.011h2.011c0.734,0,1.33-0.595,1.33-1.33C75.238,143.655,74.643,143.06,73.908,143.06z"/>
		<path fill="#EDDCCE" d="M287.073,106.852h-2.011v-2.01c0-0.735-0.596-1.33-1.33-1.33s-1.33,0.595-1.33,1.33v2.01h-2.011
			c-0.734,0-1.33,0.596-1.33,1.331c0,0.734,0.596,1.33,1.33,1.33h2.011v2.011c0,0.735,0.596,1.33,1.33,1.33s1.33-0.595,1.33-1.33
			v-2.011h2.011c0.735,0,1.33-0.595,1.33-1.33C288.403,107.447,287.809,106.852,287.073,106.852z"/>
		<path fill="#EDDCCE" d="M349.033,156.251h-2.011v-2.01c0-0.735-0.596-1.33-1.33-1.33s-1.33,0.595-1.33,1.33v2.01h-2.011
			c-0.734,0-1.33,0.596-1.33,1.33c0,0.735,0.596,1.33,1.33,1.33h2.011v2.011c0,0.735,0.596,1.33,1.33,1.33s1.33-0.595,1.33-1.33
			v-2.011h2.011c0.735,0,1.33-0.595,1.33-1.33C350.363,156.847,349.769,156.251,349.033,156.251z"/>
		<path fill="#EDDCCE" d="M432.86,109.626h-2.011v-2.011c0-0.734-0.596-1.33-1.33-1.33c-0.735,0-1.33,0.596-1.33,1.33v2.011h-2.011
			c-0.735,0-1.33,0.595-1.33,1.33s0.595,1.33,1.33,1.33h2.011v2.011c0,0.735,0.595,1.33,1.33,1.33c0.734,0,1.33-0.595,1.33-1.33
			v-2.011h2.011c0.734,0,1.33-0.595,1.33-1.33S433.595,109.626,432.86,109.626z"/>
	</g>
	<g id="lines">
		<g>
			<path fill="#FFFFFF" d="M366.524,98.556h-47.592c-1.801,0-3.261-1.46-3.261-3.261v-0.65c0-1.801,1.46-3.261,3.261-3.261h47.592
				c1.801,0,3.261,1.46,3.261,3.261v0.65C369.785,97.096,368.325,98.556,366.524,98.556z"/>
			<path fill="#FFFFFF" d="M366.524,112.953h-47.592c-1.801,0-3.261-1.46-3.261-3.261v-0.65c0-1.801,1.46-3.261,3.261-3.261h47.592
				c1.801,0,3.261,1.46,3.261,3.261v0.65C369.785,111.493,368.325,112.953,366.524,112.953z"/>
			<path fill="#FFFFFF" d="M400.321,126.441h-47.593c-1.801,0-3.261-1.46-3.261-3.261v-0.65c0-1.801,1.46-3.261,3.261-3.261h47.593
				c1.801,0,3.261,1.46,3.261,3.261v0.65C403.582,124.981,402.122,126.441,400.321,126.441z"/>
			<path fill="#FFFFFF" d="M400.321,140.839h-47.593c-1.801,0-3.261-1.46-3.261-3.261v-0.65c0-1.801,1.46-3.261,3.261-3.261h47.593
				c1.801,0,3.261,1.46,3.261,3.261v0.65C403.582,139.379,402.122,140.839,400.321,140.839z"/>
		</g>
		<g>
			<path fill="#FFFFFF" d="M119.749,136.784H79.833c-1.51,0-2.735-1.225-2.735-2.735v-0.545c0-1.511,1.225-2.735,2.735-2.735h39.916
				c1.51,0,2.735,1.224,2.735,2.735v0.545C122.483,135.559,121.259,136.784,119.749,136.784z"/>
			<path fill="#FFFFFF" d="M119.749,148.859H79.833c-1.51,0-2.735-1.225-2.735-2.735v-0.545c0-1.511,1.225-2.735,2.735-2.735h39.916
				c1.51,0,2.735,1.224,2.735,2.735v0.545C122.483,147.634,121.259,148.859,119.749,148.859z"/>
			<path fill="#FFFFFF" d="M148.093,160.171h-39.915c-1.511,0-2.735-1.225-2.735-2.735v-0.545c0-1.511,1.225-2.735,2.735-2.735
				h39.915c1.51,0,2.735,1.224,2.735,2.735v0.545C150.828,158.947,149.604,160.171,148.093,160.171z"/>
			<path fill="#FFFFFF" d="M148.093,172.247h-39.915c-1.511,0-2.735-1.225-2.735-2.735v-0.545c0-1.511,1.225-2.735,2.735-2.735
				h39.915c1.51,0,2.735,1.224,2.735,2.735v0.545C150.828,171.022,149.604,172.247,148.093,172.247z"/>
		</g>
		<g>
			<path fill="#FFFFFF" d="M391.822,305.407h-39.915c-1.511,0-2.735-1.225-2.735-2.734v-0.546c0-1.51,1.225-2.734,2.735-2.734
				h39.915c1.51,0,2.734,1.225,2.734,2.734v0.546C394.557,304.183,393.332,305.407,391.822,305.407z"/>
			<path fill="#FFFFFF" d="M391.822,317.482h-39.915c-1.511,0-2.735-1.225-2.735-2.734v-0.546c0-1.51,1.225-2.734,2.735-2.734
				h39.915c1.51,0,2.734,1.225,2.734,2.734v0.546C394.557,316.258,393.332,317.482,391.822,317.482z"/>
			<path fill="#FFFFFF" d="M420.167,328.795h-39.915c-1.511,0-2.735-1.225-2.735-2.734v-0.546c0-1.51,1.225-2.734,2.735-2.734
				h39.915c1.51,0,2.734,1.225,2.734,2.734v0.546C422.901,327.57,421.677,328.795,420.167,328.795z"/>
			<path fill="#FFFFFF" d="M420.167,340.87h-39.915c-1.511,0-2.735-1.225-2.735-2.734v-0.546c0-1.51,1.225-2.734,2.735-2.734h39.915
				c1.51,0,2.734,1.225,2.734,2.734v0.546C422.901,339.646,421.677,340.87,420.167,340.87z"/>
		</g>
	</g>
	<g id="dots">
		<g>
			<g>
				<path fill="#D2D2D2" d="M93.147,347.851c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.05c1.381,0,2.5,1.119,2.5,2.5
					S94.528,347.851,93.147,347.851z"/>
			</g>
			<g>
			
			</g>
			<g>
				<path fill="#D2D2D2" d="M161.913,347.851c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.05c1.381,0,2.5,1.119,2.5,2.5
					S163.293,347.851,161.913,347.851z"/>
			</g>
		</g>
		<g>
			<g>
				<path fill="#D2D2D2" d="M381.658,179.545c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.051c1.381,0,2.5,1.119,2.5,2.5
					S383.039,179.545,381.658,179.545z"/>
			</g>
			<g>
				
			</g>
			<g>
				<path fill="#D2D2D2" d="M450.424,179.545c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.051c1.381,0,2.5,1.119,2.5,2.5
					S451.805,179.545,450.424,179.545z"/>
			</g>
		</g>
		<g>
			<g>
				<path fill="#D2D2D2" d="M52.214,196.552c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.05c1.381,0,2.5,1.119,2.5,2.5
					S53.595,196.552,52.214,196.552z"/>
			</g>
			<g>
			
			</g>
			<g>
				<path fill="#D2D2D2" d="M120.979,196.552c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.05c1.381,0,2.5,1.119,2.5,2.5
					S122.36,196.552,120.979,196.552z"/>
			</g>
		</g>
	</g>
</g>
<g id="relative-circle">
	<g id="techs">
		
		<g id="vue_1_" transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)">
			<g transform="translate(178.06 235.01)">
				<path fill="#41B883" d="M177.17-88.916l-3.713-6.429l-3.712,6.429h-12.361l16.073-27.84l16.074,27.84H177.17z"/>
			</g>
			<g transform="translate(178.06 235.01)">
				<path fill="#34495E" d="M177.17-88.916l-3.713-6.429l-3.712,6.429h-5.931l9.643-16.703l9.645,16.703H177.17z"/>
			</g>
		</g>
		<g id="javascript_1_">
			<rect x="228.879" y="45.192" fill="#F7DF1E" width="43.18" height="43.18"/>
		
		</g>
		<g id="node_1_">
			<g>

			</g>
			<g>
				<g>
					<defs>
						<path id="SVGID_1_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
							c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
							c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
							c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
					</defs>
					<clipPath id="SVGID_2_">
						<use xlink:href="#SVGID_1_"  overflow="visible"/>
					</clipPath>
					
						<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-47.3394" y1="553.3223" x2="-47.1552" y2="553.3223" gradientTransform="matrix(-38.0649 77.6524 77.6524 38.0649 -44441.9375 -16973.125)">
						<stop  offset="0" style="stop-color:#41873F"/>
						<stop  offset="0.3288" style="stop-color:#418B3D"/>
						<stop  offset="0.6352" style="stop-color:#419637"/>
						<stop  offset="0.9319" style="stop-color:#3FA92D"/>
						<stop  offset="1" style="stop-color:#3FAE2A"/>
					</linearGradient>
					<polygon clip-path="url(#SVGID_2_)" fill="url(#SVGID_3_)" points="340.113,413.35 328.896,436.233 307.019,425.51 
						318.237,402.625 					"/>
				</g>
				<g>
					<defs>
						<path id="SVGID_4_" d="M315.058,424.461c0.074,0.097,0.167,0.18,0.276,0.242l6.66,3.847l1.109,0.638
							c0.165,0.096,0.355,0.137,0.541,0.123c0.062-0.006,0.123-0.017,0.185-0.035l8.187-14.992
							c-0.063-0.067-0.135-0.125-0.218-0.174l-5.084-2.934l-2.687-1.546c-0.076-0.045-0.157-0.077-0.243-0.098L315.058,424.461z"/>
					</defs>
					<clipPath id="SVGID_5_">
						<use xlink:href="#SVGID_4_"  overflow="visible"/>
					</clipPath>
					
						<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-48.9995" y1="549.2754" x2="-48.8151" y2="549.2754" gradientTransform="matrix(106.8073 -78.9149 -78.9149 -106.8073 48901.8438 55220.25)">
						<stop  offset="0" style="stop-color:#41873F"/>
						<stop  offset="0.1376" style="stop-color:#41873F"/>
						<stop  offset="0.4032" style="stop-color:#54A044"/>
						<stop  offset="0.7136" style="stop-color:#66B848"/>
						<stop  offset="0.9081" style="stop-color:#6CC04A"/>
						<stop  offset="1" style="stop-color:#6CC04A"/>
					</linearGradient>
					<polygon clip-path="url(#SVGID_5_)" fill="url(#SVGID_6_)" points="305.6,416.521 326.028,401.428 341.476,422.335 
						321.046,437.43 					"/>
				</g>
				<g>
					<defs>
						<path id="SVGID_7_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
							c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
							c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
							c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
					</defs>
					<clipPath id="SVGID_8_">
						<use xlink:href="#SVGID_7_"  overflow="visible"/>
					</clipPath>
					<g clip-path="url(#SVGID_8_)">
						<defs>
							<polygon id="SVGID_9_" points="322.84,407.982 322.733,408.043 322.876,408.043 							"/>
						</defs>
						<clipPath id="SVGID_10_">
							<use xlink:href="#SVGID_9_"  overflow="visible"/>
						</clipPath>
						
							<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="-47.2485" y1="548.5449" x2="-47.061" y2="548.5449" gradientTransform="matrix(97.417 0 0 -97.417 4917.3125 53845.625)">
							<stop  offset="0" style="stop-color:#6CC04A"/>
							<stop  offset="0.0919" style="stop-color:#6CC04A"/>
							<stop  offset="0.2864" style="stop-color:#66B848"/>
							<stop  offset="0.5968" style="stop-color:#54A044"/>
							<stop  offset="0.8624" style="stop-color:#41873F"/>
							<stop  offset="1" style="stop-color:#41873F"/>
						</linearGradient>
						<rect x="322.733" y="407.982" clip-path="url(#SVGID_10_)" fill="url(#SVGID_11_)" width="0.143" height="0.061"/>
					</g>
				</g>
				<g>
					<defs>
						<path id="SVGID_12_" d="M323.473,409.509c-0.13,0.013-0.257,0.054-0.374,0.121l-7.743,4.468l8.348,15.205
							c0.116-0.016,0.228-0.055,0.334-0.115l7.763-4.484c0.239-0.139,0.403-0.374,0.453-0.641l-8.511-14.539
							c-0.062-0.012-0.127-0.018-0.19-0.018C323.524,409.506,323.499,409.507,323.473,409.509"/>
					</defs>
					<clipPath id="SVGID_13_">
						<use xlink:href="#SVGID_12_"  overflow="visible"/>
					</clipPath>
					
						<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="-47.2471" y1="549.0625" x2="-47.0628" y2="549.0625" gradientTransform="matrix(97.417 0 0 -97.417 4917.3125 53907.4375)">
						<stop  offset="0" style="stop-color:#6CC04A"/>
						<stop  offset="0.0919" style="stop-color:#6CC04A"/>
						<stop  offset="0.2864" style="stop-color:#66B848"/>
						<stop  offset="0.5968" style="stop-color:#54A044"/>
						<stop  offset="0.8624" style="stop-color:#41873F"/>
						<stop  offset="1" style="stop-color:#41873F"/>
					</linearGradient>
					<rect x="315.355" y="409.506" clip-path="url(#SVGID_13_)" fill="url(#SVGID_14_)" width="16.897" height="19.797"/>
				</g>
				<g>
					<defs>
						<path id="SVGID_15_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
							c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
							c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
							c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
					</defs>
					<clipPath id="SVGID_16_">
						<use xlink:href="#SVGID_15_"  overflow="visible"/>
					</clipPath>
					<g clip-path="url(#SVGID_16_)">
						<defs>
							<polygon id="SVGID_17_" points="332.543,424.559 332.492,424.471 332.492,424.589 							"/>
						</defs>
						<clipPath id="SVGID_18_">
							<use xlink:href="#SVGID_17_"  overflow="visible"/>
						</clipPath>
						
							<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="-47.2295" y1="549.2949" x2="-47.0628" y2="549.2949" gradientTransform="matrix(97.417 0 0 -97.417 4917.3125 53935.25)">
							<stop  offset="0" style="stop-color:#6CC04A"/>
							<stop  offset="0.0919" style="stop-color:#6CC04A"/>
							<stop  offset="0.2864" style="stop-color:#66B848"/>
							<stop  offset="0.5968" style="stop-color:#54A044"/>
							<stop  offset="0.8624" style="stop-color:#41873F"/>
							<stop  offset="1" style="stop-color:#41873F"/>
						</linearGradient>
						<rect x="332.492" y="424.471" clip-path="url(#SVGID_18_)" fill="url(#SVGID_19_)" width="0.051" height="0.118"/>
					</g>
				</g>
				<g>
					<defs>
						<path id="SVGID_20_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
							c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
							c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
							c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
					</defs>
					<clipPath id="SVGID_21_">
						<use xlink:href="#SVGID_20_"  overflow="visible"/>
					</clipPath>
					<g clip-path="url(#SVGID_21_)">
						<defs>
							<path id="SVGID_22_" d="M331.818,424.703l-7.772,4.484c-0.106,0.063-0.223,0.101-0.343,0.117l0.155,0.281l8.634-4.997v-0.118
								l-0.214-0.365C332.215,424.355,332.045,424.572,331.818,424.703"/>
						</defs>
						<clipPath id="SVGID_23_">
							<use xlink:href="#SVGID_22_"  overflow="visible"/>
						</clipPath>
						
							<linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="-47.2476" y1="549.4014" x2="-47.0629" y2="549.4014" gradientTransform="matrix(97.417 0 0 -97.417 4917.3125 53947.875)">
							<stop  offset="0" style="stop-color:#6CC04A"/>
							<stop  offset="0.0919" style="stop-color:#6CC04A"/>
							<stop  offset="0.2864" style="stop-color:#66B848"/>
							<stop  offset="0.5968" style="stop-color:#54A044"/>
							<stop  offset="0.8624" style="stop-color:#41873F"/>
							<stop  offset="1" style="stop-color:#41873F"/>
						</linearGradient>
						<rect x="323.703" y="424.105" clip-path="url(#SVGID_23_)" fill="url(#SVGID_24_)" width="8.789" height="5.48"/>
					</g>
				</g>
				<g>
					<defs>
						<path id="SVGID_25_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
							c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
							c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
							c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
					</defs>
					<clipPath id="SVGID_26_">
						<use xlink:href="#SVGID_25_"  overflow="visible"/>
					</clipPath>
					<g clip-path="url(#SVGID_26_)">
						<defs>
							<path id="SVGID_27_" d="M331.818,424.703l-7.772,4.484c-0.106,0.063-0.223,0.101-0.343,0.117l0.155,0.281l8.634-4.997v-0.118
								l-0.214-0.365C332.215,424.355,332.045,424.572,331.818,424.703"/>
						</defs>
						<clipPath id="SVGID_28_">
							<use xlink:href="#SVGID_27_"  overflow="visible"/>
						</clipPath>
						
							<linearGradient id="SVGID_29_" gradientUnits="userSpaceOnUse" x1="-47.8159" y1="552.2285" x2="-47.6316" y2="552.2285" gradientTransform="matrix(-60.0806 122.5644 122.5644 60.0806 -70221.4688 -26905.375)">
							<stop  offset="0" style="stop-color:#41873F"/>
							<stop  offset="0.3288" style="stop-color:#418B3D"/>
							<stop  offset="0.6352" style="stop-color:#419637"/>
							<stop  offset="0.9319" style="stop-color:#3FA92D"/>
							<stop  offset="1" style="stop-color:#3FAE2A"/>
						</linearGradient>
						<polygon clip-path="url(#SVGID_28_)" fill="url(#SVGID_29_)" points="334.656,425.168 330.788,433.06 321.537,428.524 
							325.405,420.633 						"/>
					</g>
				</g>
			</g>
		</g>
		<g id="gridsome_1_">
			
				<linearGradient id="SVGID_30_" gradientUnits="userSpaceOnUse" x1="417.623" y1="189.8169" x2="417.623" y2="167.5225" gradientTransform="matrix(1 0 0 -1 8.3999 477.04)">
				<stop  offset="0" style="stop-color:#00583E"/>
				<stop  offset="1" style="stop-color:#00835C"/>
			</linearGradient>
			<path fill="url(#SVGID_30_)" d="M441.284,287.41c1.816-0.088,3.425,1.321,3.581,3.139c0.68,8.795-7.369,18.647-18.712,18.963
				c-9.559,0.236-19.012-7.416-19.012-18.987c0-1.823,1.507-3.302,3.325-3.302s3.292,1.479,3.292,3.302
				c0,7.61,6.12,12.536,12.232,12.386c7.524-0.209,12.417-6.725,12.162-12.045C438.066,289.045,439.469,287.497,441.284,287.41z"/>
			<path fill="#00A672" d="M433.059,290.78c0-1.867,1.523-3.38,3.401-3.38h4.957c1.879,0,3.448,1.513,3.448,3.38
				s-1.569,3.38-3.448,3.38h-4.957C434.582,294.16,433.059,292.647,433.059,290.78z"/>
			<path fill="#00A672" d="M422.658,290.785c0-1.869,1.514-3.385,3.378-3.385s3.378,1.516,3.378,3.385s-1.514,3.385-3.378,3.385
				S422.658,292.654,422.658,290.785z"/>
			<path fill="#00A672" d="M429.32,274.969c0.075,1.821-1.336,3.359-3.153,3.436c-7.844,0.326-12.632,6.491-12.398,12.345
				c0.072,1.821-1.313,3.358-3.13,3.431c-1.816,0.072-3.414-1.398-3.487-3.22c-0.379-9.538,7.563-18.968,18.742-19.153
				C427.711,271.73,429.245,273.146,429.32,274.969z"/>
		</g>
		<g id="gatsby_1_">
			<path fill="#744C9E" d="M73.522,272.766c-9.883,0-17.895,8.012-17.895,17.895s8.012,17.895,17.895,17.895
				s17.895-8.012,17.895-17.895S83.405,272.766,73.522,272.766z M59.473,290.846l13.864,13.863
				C65.724,304.609,59.572,298.459,59.473,290.846z M76.667,304.357l-16.843-16.844c1.429-6.246,7.019-10.906,13.698-10.906
				c4.669,0,8.806,2.277,11.36,5.781l-1.945,1.717c-2.073-2.971-5.517-4.918-9.415-4.918c-4.964,0-9.191,3.154-10.788,7.566
				l14.694,14.693c3.568-1.291,6.313-4.305,7.232-8.035H78.57v-2.752h6.423l0,0h2.581l0,0
				C87.574,297.338,82.914,302.93,76.667,304.357z"/>
		</g>
	</g>
</g>
</svg>

我想用SVG和CSS制作一些动画。我创建一个圆和对象。这些对象应绕圈旋转而不互相旋转。这是我关于问题的GIF。当您...

css svg css-animations keyframe
1个回答
2
投票

仅继承相同的动画，并将方向更改为反向：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.