无法根据中心原点旋转齿轮答案

【问题标题】：Not able to spin the cog based on the centre origin无法根据中心原点旋转齿轮
【发布时间】：2019-06-24 23:32:04
【问题描述】：

我正在尝试制作一个悬停效果，它将三个不同的 cog svg 图标旋转到其受人尊敬的中心原点。我尝试使用transform-origin 作为中心，但没有运气。任何帮助，将不胜感激。下面是我的代码。

.cog--middle {
  transform: rotate(0deg);
  transition: 0.3s;
  transform-origin: center center;
}

svg:hover .cog--middle {
  transform: rotate(360deg);
}

<svg
  width="110px"
  height="100px"
  viewBox="0 0 110 100"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <title>ic--rollout</title>
  <g class="cog--middle">
    <path
      d="M33.6286316,13.9605932 C35.3737066,12.3664297 37.3249373,10.9942262 39.4376676,9.88864575 L37.7639337,2.84180199 L45.4931775,0.0900928417 L49.0720315,6.94284116 C50.0880101,6.82901642 51.1207261,6.7705605 52.1670931,6.7705605 C53.4317563,6.7705605 54.6764785,6.85595112 55.8958106,7.02128212 L58.4472618,0.245430567 L66.3935871,2.28698531 L65.5015991,10.2150059 C67.2900149,11.208746 68.956009,12.3961862 70.4712471,13.7489885 L78.472844,10.4564722 L82.3993634,17.661307 L76.7195784,21.8770189 C76.7662084,21.9692338 76.8123344,22.061747 76.8579526,22.1545548 C77.8852682,24.244573 78.6551102,26.4840416 79.1260955,28.831571 L86.6029963,29.8342633 L86.4016167,38.0374048 L79.2833198,38.8585809 C78.9039047,41.1188654 78.2488189,43.2856361 77.3538253,45.3231245 L82.6154298,51.0936912 L77.189124,57.2481974 L71.7016575,53.6264993 C71.4947362,53.835398 71.2844889,54.0409954 71.0710016,54.2432054 C69.5139432,55.7180126 67.7845278,57.0126257 65.9161266,58.0936683 L67.0389416,65.7326031 L59.0993207,67.8000862 L56.455254,61.4407304 C56.091817,61.4976526 55.7260194,61.5474549 55.3580085,61.5899901 C54.3111517,61.7109872 53.2463841,61.7731797 52.1670931,61.7731797 C51.0760163,61.7731797 49.9997819,61.7096216 48.9418893,61.5860052 L46.5757103,67.5520122 L38.6662197,65.3720638 L39.5343402,58.7054384 C39.3461507,58.6079107 39.1592312,58.5082724 38.9736132,58.4065544 C36.8360572,57.2351814 34.8710875,55.7880122 33.126567,54.1129174 L26.517699,57.3888051 L22.0982404,50.4754646 L27.2985471,46.0207673 C26.2463138,43.7967471 25.4835451,41.4089702 25.0588838,38.9060872 L17.8061497,37.9334569 L18.0075293,29.7303153 L25.1942049,28.9012511 C25.6358466,26.6699551 26.347362,24.5357377 27.2933125,22.5340431 C27.3591986,22.3946237 27.426222,22.2558471 27.4943708,22.1177255 L21.6159342,17.247506 L26.1330259,10.3975792 L33.6286316,13.9605932 Z M52.1670931,53.9156627 C63.0143367,53.9156627 71.807765,45.1208371 71.807765,34.2718701 C71.807765,23.422903 63.0143367,14.6280775 52.1670931,14.6280775 C41.3198495,14.6280775 32.5264212,23.422903 32.5264212,34.2718701 C32.5264212,45.1208371 41.3198495,53.9156627 52.1670931,53.9156627 Z"
      fill="#1B385C"
      id="wheel"
    />
  </g>
  <g class="cog--left">
    <path
      d="M9.03425644,68.7605395 C10.0306523,67.8355529 11.144758,67.0393549 12.3510762,66.3978604 L11.3954144,62.3090478 L15.8086266,60.7124149 L17.8520661,64.6886069 C18.4321654,64.622562 19.0218215,64.5886439 19.6192718,64.5886439 C20.3413641,64.5886439 21.0520705,64.6381904 21.7482798,64.7341209 L23.205097,60.802547 L27.7422576,61.9871248 L27.2329539,66.5872254 C28.2540962,67.1638264 29.2053388,67.8528186 30.0705033,68.6377594 L34.6392226,66.7273322 L36.8811707,70.9078164 L33.6381501,73.3539124 C33.6647747,73.4074185 33.6911115,73.4610977 33.7171585,73.5149479 C34.3037309,74.7276458 34.7432922,76.0270599 35.0122134,77.3891743 L39.2813439,77.9709696 L39.166361,82.7307046 L35.101985,83.2071781 C34.8853478,84.5186703 34.5113096,85.7759026 34.0002898,86.9581209 L37.0045394,90.3063952 L33.9062494,93.877444 L30.773038,91.7760145 C30.6548909,91.8972245 30.5348448,92.016519 30.4129487,92.1338479 C29.5239058,92.98958 28.5364512,93.7407575 27.4696391,94.3680142 L28.1107394,98.8003777 L23.577407,100 L22.0677085,96.3100908 C21.8601947,96.3431189 21.6513331,96.3720158 21.4412077,96.3966962 C20.8434777,96.4669027 20.235521,96.5029888 19.6192718,96.5029888 C18.9962932,96.5029888 18.3817893,96.4661103 17.7777581,96.394384 L16.4267268,99.8560592 L11.910598,98.5911809 L12.4062739,94.7229835 C12.2988222,94.6663948 12.1920957,94.6085813 12.0861123,94.5495611 C10.8656193,93.8698917 9.74366881,93.0301961 8.74758958,92.0582505 L4.97408501,93.9590292 L2.45068049,89.9476796 L5.41993035,87.3629165 C4.8191306,86.0724661 4.38360801,84.6869987 4.14113665,83.2347429 L-1.53588253e-12,82.6703906 L0.114982882,77.9106556 L4.21840174,77.429605 C4.47056851,76.134933 4.87682672,74.8965892 5.41694166,73.7351396 C5.45456105,73.6542439 5.49282981,73.5737211 5.5317411,73.4935783 L2.17529527,70.6677154 L4.75444596,66.6931605 L9.034257,68.7605397 Z M19.6192718,91.9437967 C25.8127869,91.9437967 30.8336229,86.8407471 30.8336229,80.5458164 C30.8336229,74.2508857 25.8127869,69.147836 19.6192718,69.147836 C13.4257568,69.147836 8.40492079,74.2508857 8.40492079,80.5458164 C8.40492079,86.8407471 13.4257568,91.9437967 19.6192718,91.9437967 Z"
      fill="#1B385C"
      id="wheel-copy"
    />
  </g>
  <g class="cog--right">
    <path
      d="M79.7529126,63.3257569 C80.7493084,62.4007703 81.8634142,61.6045723 83.0697323,60.9630778 L82.1140705,56.8742652 L86.5272828,55.2776323 L88.5707222,59.2538243 C89.1508216,59.1877794 89.7404776,59.1538613 90.337928,59.1538613 C91.0600202,59.1538613 91.7707267,59.2034078 92.4669359,59.2993383 L93.9237532,55.3677644 L98.4609137,56.5523422 L97.95161,61.1524428 C98.9727524,61.7290438 99.9239949,62.418036 100.789159,63.2029768 L105.357879,61.2925496 L107.599827,65.4730338 L104.356806,67.9191298 C104.383431,67.9726359 104.409768,68.0263151 104.435815,68.0801653 C105.022387,69.2928632 105.461948,70.5922773 105.73087,71.9543917 L110,72.536187 L109.885017,77.295922 L105.820641,77.7723956 C105.604004,79.0838877 105.229966,80.3411199 104.718946,81.5233383 L107.723196,84.8716126 L104.624905,88.4426614 L101.491694,86.3412319 C101.373547,86.4624419 101.253501,86.5817363 101.131605,86.6990653 C100.242562,87.5547973 99.2551074,88.3059749 98.1882952,88.9332316 L98.8293956,93.3655951 L94.2960631,94.5652174 L92.7863646,90.8753082 C92.5788508,90.9083363 92.3699893,90.9372332 92.1598639,90.9619135 C91.5621338,91.0321201 90.9541772,91.0682062 90.337928,91.0682062 C89.7149494,91.0682062 89.1004454,91.0313277 88.4964142,90.9596014 L87.145383,94.4212766 L82.6292541,93.1563982 L83.12493,89.2882008 C83.0174784,89.2316122 82.9107518,89.1737987 82.8047684,89.1147785 C81.5842754,88.4351091 80.4623249,87.5954134 79.4662457,86.6234679 L75.6927412,88.5242466 L73.1693366,84.512897 L76.1385865,81.9281339 C75.5377867,80.6376835 75.1022641,79.2522161 74.8597928,77.7999603 L70.7186561,77.235608 L70.833639,72.475873 L74.9370579,71.9948224 C75.1892246,70.7001504 75.5954829,69.4618066 76.1355978,68.300357 C76.1732172,68.2194613 76.2114859,68.1389385 76.2503972,68.0587957 L72.8939514,65.2329328 L75.4731021,61.2583779 L79.7529131,63.3257571 Z M90.337928,86.5090141 C96.531443,86.5090141 101.552279,81.4059645 101.552279,75.1110338 C101.552279,68.816103 96.531443,63.7130534 90.337928,63.7130534 C84.1444129,63.7130534 79.1235769,68.816103 79.1235769,75.1110338 C79.1235769,81.4059645 84.1444129,86.5090141 90.337928,86.5090141 Z"
      fill="#1B385C"
      id="wheel-copy-2"
    />
  </g>
</svg>

【问题讨论】：

你需要transform-box:fill-box;
将transform-box: fill-box;添加到.cog--middle
我知道transform-box，但恐怕它与浏览器不兼容。我不是在寻找 IE 9 它甚至不支持边缘。
那么你需要考虑整个 SVG 来计算原点
顺便说一句，无论您多么努力地尝试更改旋转点，您的齿轮都不是 100% 相对于边界框完全居中的。在更高的旋转速度下会很明显。

标签： html css svg css-animations

【解决方案1】：

可以在矢量编辑器中绘制齿轮。但是，虽然很难找到齿轮的确切旋转中心。
如果旋转中心指示不准确，齿轮会随着豆子旋转，

我决定首先选择旋转中心 - 100,100px 并围绕它创建一个齿轮。

画出齿轮的外轮廓

当圆的半径为R = 60px时，周长为

C=2*Pi*R≈2*3.1415927*60 = 376.98

找出存在 24 个轮齿的扇区的长度376,98 / 24 = 15,71

公式stroke-dasharray = "7.85 7.85"

<svg width="250" height="250" version="1.1"
     viewBox="0 0 250 250" preserveAspectRatio="none"
      xmlns="http://www.w3.org/2000/svg" 
	   xmlns:xlink='http://www.w3.org/1999/xlink'>
      <!-- big gear -->
    <circle cx="100" cy="100" r="15"  style="stroke: grey; fill:none;   stroke-width: 4px;" />
      <circle cx="100" cy="100" r="50"  style="stroke: gray; fill:none;   stroke-width: 15px;" />
       <circle cx="100" cy="100" r="60"  style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85;  stroke-width: 10px;" />
</svg>

创建齿轮的辐条

在末端用标记画线

<svg width="250" height="250" version="1.1"
     viewBox="0 0 250 250" preserveAspectRatio="none"
      xmlns="http://www.w3.org/2000/svg" 
	   xmlns:xlink='http://www.w3.org/1999/xlink'>
   
   <defs>
		<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
			markerUnits="userSpaceOnUse"  orient="auto"
			markerWidth="20" markerHeight="20">
			<rect width="14" height="10" rx="2" fill="grey"/>
		</marker> 
		 <!-- gear jumpers -->
		<line id="line1" x1="150" y1="100" x2="60" y2="100"
			style=" fill:none;
			 marker-end: url(#MarkerArrow);
			 marker-start: url(#MarkerArrow);
		   stroke:grey; stroke-width:6; ">
	  
		</line> 
	</defs	

   <!-- big gear -->
    <circle cx="100" cy="100" r="15"  style="stroke: grey; fill:none;   stroke-width: 4px;" />
      <circle cx="100" cy="100" r="50"  style="stroke: gray; fill:none;   stroke-width: 15px;" />
       <circle cx="100" cy="100" r="60"  style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85;  stroke-width: 10px;" /> 
	   
	   <use xlink:href="#line1"  transform="rotate(0 100 100)"/>
      
</svg>

克隆跳线并转向不同的角度

<svg width="250" height="250" version="1.1"
     viewBox="0 0 250 250" preserveAspectRatio="none"
      xmlns="http://www.w3.org/2000/svg" 
	   xmlns:xlink='http://www.w3.org/1999/xlink'>
   
   <defs>
		<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
			markerUnits="userSpaceOnUse"  orient="auto"
			markerWidth="20" markerHeight="20">
			<rect width="14" height="10" rx="2" fill="grey"/>
		</marker> 
		 <!-- gear jumpers -->
		<line id="line1" x1="150" y1="100" x2="60" y2="100"
			style=" fill:none;
			 marker-end: url(#MarkerArrow);
			 marker-start: url(#MarkerArrow);
		   stroke:grey; stroke-width:6; ">
	  
		</line> 
	</defs	

   <!-- big gear -->
    <circle cx="100" cy="100" r="15"  style="stroke: grey; fill:none;   stroke-width: 4px;" />
      <circle cx="100" cy="100" r="50"  style="stroke: gray; fill:none;   stroke-width: 15px;" />
       <circle cx="100" cy="100" r="60"  style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85;  stroke-width: 10px;" /> 
	   	   
      <use xlink:href="#line1"  transform="rotate(0 100 100)"/>
      <use xlink:href="#line1"  transform="rotate(120 100 100)"/>
       <use xlink:href="#line1"  transform="rotate(240 100 100)"/>
</svg>

为齿轮的旋转设置动画

<animateTransform
            attributeName="transform"
            type="rotate"
            from="0 100 100" to="360 100 100"
            dur="7s"
            repeatCount="indefinite" fill="freeze"
          />

<svg width="250" height="250" version="1.1"
     viewBox="0 0 250 250" preserveAspectRatio="none"
      xmlns="http://www.w3.org/2000/svg" 
	   xmlns:xlink='http://www.w3.org/1999/xlink'>
   
   <defs>
		<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
			markerUnits="userSpaceOnUse"  orient="auto"
			markerWidth="20" markerHeight="20">
			<rect width="14" height="10" rx="2" fill="grey"/>
		</marker> 
		 <!-- gear jumpers -->
		<line id="line1" x1="150" y1="100" x2="60" y2="100"
			style=" fill:none;
			 marker-end: url(#MarkerArrow);
			 marker-start: url(#MarkerArrow);
		   stroke:grey; stroke-width:6; ">
	  
		</line> 
	</defs	

	    <!-- big gear -->
   <g>
	      <animateTransform
		    attributeName="transform"
			type="rotate"
			from="0 100 100" to="360 100 100"
			dur="7s"
			repeatCount="indefinite" fill="freeze"
		  />
	 <use xlink:href="#line1"  transform="rotate(0 100 100)"/>
      <use xlink:href="#line1"  transform="rotate(120 100 100)"/>
       <use xlink:href="#line1"  transform="rotate(240 100 100)"/>
   
       <circle cx="100" cy="100" r="15"  style="stroke: grey; fill:none;   stroke-width: 4px;" />
      <circle cx="100" cy="100" r="50"  style="stroke: gray; fill:none;   stroke-width: 15px;" />
     <circle cx="100" cy="100" r="60"  style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85;  stroke-width: 10px;" />
    </g>

</svg>

同样，我们创建了一个小齿轮。添加旋转控制按钮

准备好一对齿轮

<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
      xmlns="http://www.w3.org/2000/svg" 
	   xmlns:xlink='http://www.w3.org/1999/xlink'>
     	<defs>
		<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
			markerUnits="userSpaceOnUse"  orient="auto"
			markerWidth="20" markerHeight="20">
			<rect width="14" height="10" rx="2" fill="grey"/>
		</marker>  
		    <!-- gear jumpers -->
		<line id="line1" x1="150" y1="100" x2="60" y2="100"
			style=" fill:none;
			 marker-end: url(#MarkerArrow);
			 marker-start: url(#MarkerArrow);
		   stroke:grey; stroke-width:6; ">
	  
		</line> 
		<marker id="MarkerArrow2" viewBox="0 0 20 20" refX="3" refY="3.5"
			markerUnits="userSpaceOnUse"  orient="auto"
			markerWidth="20" markerHeight="20">
			<rect width="7" height="7" rx="2" fill="grey"/>
		</marker>
		<line id="line2" x1="168.5" y1="100" x2="211.5" y2="100"
			style=" fill:none;
			 marker-end: url(#MarkerArrow2);
			 marker-start: url(#MarkerArrow2);
		     stroke:grey; stroke-width:3.5; ">
	  
		</line> 
		
     </defs>
	     <!-- big gear -->
<g id="Big_Gear">  
	 <g>
	      <animateTransform attributeName="transform"
						type="rotate"
						from="0 100 100" to="360 100 100"
						 begin="gO1.click" end="stop1.click" dur="7s"
						repeatCount="indefinite" fill="freeze"
		  />
	 <use xlink:href="#line1"  transform="rotate(0 100 100)"/>
      <use xlink:href="#line1"  transform="rotate(120 100 100)"/>
       <use xlink:href="#line1"  transform="rotate(240 100 100)"/>
   
       <circle cx="100" cy="100" r="15"  style="stroke: grey; fill:none;   stroke-width: 4px;" />
      <circle cx="100" cy="100" r="50"  style="stroke: gray; fill:none;   stroke-width: 15px;" />
     <circle cx="100" cy="100" r="60"  style="stroke: gray; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />
    </g>
</g>
   <!-- small gear -->
<g id="Small_Gear" transform="rotate(20 100 100)">
	 <g>
	      <animateTransform attributeName="transform"
						type="rotate"
						from="0 190 100" to="-360 190 100"
						 begin="gO1.click" end="stop1.click" dur="7s"
						repeatCount="indefinite" fill="freeze"
		  />
	 <use xlink:href="#line2"  transform="rotate(0 190 100)"/>
       <use xlink:href="#line2"  transform="rotate(120 190 100)"/>
        <use xlink:href="#line2"  transform="rotate(240 190 100)"/>
   
       <circle cx="190" cy="100" r="7.5"  style="stroke: grey; fill:none;   stroke-width: 3px;" />
      <circle cx="190" cy="100" r="25"  style="stroke: grey; fill:none;   stroke-width: 6px;" />
     <circle cx="190" cy="100" r="30"  style="stroke: grey; fill:none; stroke-dasharray: 5 5;  stroke-width: 5px;" />
    </g>
</g>
<g transform = "translate(-20,-160)">
  <g id="gO1">
   <rect x="35" y="165" height="20" width="60" rx="5" fill="green"/>
   <text x="50" y="181" font-size="18" fill="white">GO</text>
  </g>
 <g id="stop1">
	<rect x="100" y="165" height="20" width="60" rx="5" fill="red"/>
	<text x="105" y="181" font-size="18" fill="white">STOP</text>
 </g>
</g>  
	</svg>

三档

可以使用命令克隆齿轮 -

<use xlink:href="#Small_Gear" />

<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
      xmlns="http://www.w3.org/2000/svg" 
	   xmlns:xlink='http://www.w3.org/1999/xlink'>
     	<defs>
		<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
			markerUnits="userSpaceOnUse"  orient="auto"
			markerWidth="20" markerHeight="20">
			<rect width="14" height="10" rx="2" fill="grey"/>
		</marker>  
		    <!-- gear jumpers -->
		<line id="line1" x1="150" y1="100" x2="60" y2="100"
			style=" fill:none;
			 marker-end: url(#MarkerArrow);
			 marker-start: url(#MarkerArrow);
		   stroke:grey; stroke-width:6; ">
	  
		</line> 
		<marker id="MarkerArrow2" viewBox="0 0 20 20" refX="3" refY="3.5"
			markerUnits="userSpaceOnUse"  orient="auto"
			markerWidth="20" markerHeight="20">
			<rect width="7" height="7" rx="2" fill="grey"/>
		</marker>
		<line id="line2" x1="168.5" y1="100" x2="211.5" y2="100"
			style=" fill:none;
			 marker-end: url(#MarkerArrow2);
			 marker-start: url(#MarkerArrow2);
		     stroke:grey; stroke-width:3.5; ">
	  
		</line> 
		
     </defs> 
<g id="two gears" transform="translate(25 0)">	 
	     <!-- big gear -->
<g id="Big_Gear">  
	 <g>
	      <animateTransform attributeName="transform"
						type="rotate"
						from="0 100 100" to="360 100 100"
						 begin="gO1.click" end="stop1.click" dur="7s"
						repeatCount="indefinite" fill="freeze"
		  />
	 <use xlink:href="#line1"  transform="rotate(0 100 100)"/>
      <use xlink:href="#line1"  transform="rotate(120 100 100)"/>
       <use xlink:href="#line1"  transform="rotate(240 100 100)"/>
   
       <circle cx="100" cy="100" r="15"  style="stroke: grey; fill:none;   stroke-width: 4px;" />
      <circle cx="100" cy="100" r="50"  style="stroke: gray; fill:none;   stroke-width: 15px;" />
     <circle cx="100" cy="100" r="60"  style="stroke: gray; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />
    </g>
</g>
   <!-- small gear -->
  <g id="Small_Gear" transform="rotate(20 100 100)">
	 <g>
	      <animateTransform attributeName="transform"
						type="rotate"
						from="0 190 100" to="-360 190 100"
						 begin="gO1.click" end="stop1.click" dur="7s"
						repeatCount="indefinite" fill="freeze"
		  />
	 <use xlink:href="#line2"  transform="rotate(0 190 100)"/>
       <use xlink:href="#line2"  transform="rotate(120 190 100)"/>
        <use xlink:href="#line2"  transform="rotate(240 190 100)"/>
   
       <circle cx="190" cy="100" r="7.5"  style="stroke: grey; fill:none;   stroke-width: 3px;" />
      <circle cx="190" cy="100" r="25"  style="stroke: grey; fill:none;   stroke-width: 6px;" />
     <circle cx="190" cy="100" r="30"  style="stroke: grey; fill:none; stroke-dasharray: 5 5;  stroke-width: 5px;" />
    </g>
  </g> 
 </g> 
  <use xlink:href="#Small_Gear" x="-146" />
<g transform = "translate(-30,-160)">
  <g id="gO1">
   <rect x="35" y="165" height="20" width="60" rx="5" fill="green"/>
   <text x="50" y="181" font-size="18" fill="white">GO</text>
  </g>
 <g id="stop1">
	<rect x="100" y="165" height="20" width="60" rx="5" fill="red"/>
	<text x="105" y="181" font-size="18" fill="white">STOP</text>
 </g>
</g>  
	</svg>

行星传动示例

.parent{
position: relative;
}

.container{
width: 75%;
height: 75%;
margin: auto;
position: absolute;
top: 0; 
left: 0; 

}

<div class="parent">
 <div class="container">
<svg  version="1.1"    xmlns="http://www.w3.org/2000/svg" 
	   xmlns:xlink='http://www.w3.org/1999/xlink' 
	    viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet">	    >
	 <title>animation planetary mechanism</title>
	 <defs>
		<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
			markerUnits="userSpaceOnUse"  orient="auto"
			markerWidth="20" markerHeight="20">
			<rect width="14" height="10" rx="2" fill="#22211D"/>
		</marker>
			<line id="line1" x1="150" y1="100" x2="60" y2="100"
				style=" fill:none;
				 marker-end: url(#MarkerArrow);
				 marker-start: url(#MarkerArrow);
			   stroke:#22211D; stroke-width:6; ">
			</line> 
				<marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7"
					markerUnits="userSpaceOnUse"  orient="auto"
					markerWidth="20" markerHeight="20">
					<rect width="7" height="3.5" rx="2" fill="#22211D"/>
				</marker>
		<line id="line-s" x1="175" y1="100" x2="202" y2="100"
			style=" fill:none;
			 marker-end: url(#MarkerArrow-s1);
			 marker-start: url(#MarkerArrow-s);
		   stroke:#22211D; stroke-width:2; "		>
	  
		</line> 
		<linearGradient id="vertical"
			
			x2="0%" y2="100%"
			spreadMethod="pad" >
		   <stop offset="0%" stop-color="powderblue"/>
		   <stop offset="100%" stop-color="lightgreen"/>
		</linearGradient>
		
     </defs>
	 <rect width="100%" height="100%" fill="url(#vertical)" />  
  <g transform = "translate(300,60)" >
   
    <g id="wheel">
	    <g>
	      <animateTransform attributeName="transform"
						type="rotate"
						from="0 100 100" to="360 100 100"
						 begin="gO1.click" end="stop1.click" dur="14s"
						repeatCount="indefinite"
		  />
			   <use xlink:href="#line1"  transform="rotate(0 100 100)"/>
			   <use xlink:href="#line1"  transform="rotate(120 100 100)"/>
			   <use xlink:href="#line1"  transform="rotate(240 100 100)"/>
	   

			  <circle cx="100" cy="100" r="15"  style="stroke: #22211D; fill:none;   stroke-width: 4px;" />
			  <circle cx="100" cy="100" r="50"  style="stroke: #22211D; fill:none;   stroke-width: 15px;" />
			  <circle cx="100" cy="100" r="60"  style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />
			  <circle cx="150" cy="100" r="3"  style="stroke: #22211D; fill:yellow; " />
       </g>
    </g>

    <g id="col-small">
	 
		<g>
			 <animateTransform attributeName="transform"
							type="rotate"
							from="0 188 100" to="-360 188 100"
							 begin="gO1.click" end="stop1.click" dur="3.5s"
							repeatCount="indefinite"
					  />
				 <use xlink:href="#line-s"  transform="rotate(0 188 100)"/>
				 <use xlink:href="#line-s"  transform="rotate(120 188 100)"/>
				 <use xlink:href="#line-s"  transform="rotate(240 188 100)"/>
		   
			  <circle cx="188" cy="100" r="8"  style="stroke: #22211D; fill:none;   stroke-width: 4px;" />
			  <circle cx="188" cy="100" r="18"  style="stroke: #22211D; fill:none;   stroke-width: 7px;" />
			  <circle cx="188" cy="100" r="24"  style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />
			  <circle cx="206" cy="100" r="3"  style="stroke: #22211D; fill:yellow; " />
 
		</g>
    </g>
 
    <g id="planetar" >
	   <g>
	         <animateTransform attributeName="transform"
							type="rotate"
							from="0 100 100" to="-360 100 100"
							 begin="gO1.click" end="stop1.click" dur="28s"
							repeatCount="indefinite"
			  />
	   
			  <circle cx="100" cy="100" r="116"  style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />
			  <circle cx="100" cy="100" r="124"  style="stroke: #22211D; fill:none;   stroke-width: 12px;" />
			  <circle cx="224" cy="100" r="3"  style="stroke: #22211D; fill:yellow; " />
		</g>
	</g>

		<g > 
			<use xlink:href="#col-small" transform="rotate(240 100 100)"  />
			<use xlink:href="#col-small" transform="rotate(120 100 100)"  />
		</g>

		<g transform = "translate(0,120)">
			  <g id="gO1">
				<rect x="45" y="115" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue"/>
				<text x="62" y="132" font-size="16" fill="yellow">GO</text>
			  </g>
					<g id="stop1">
						<rect x="110" y="115" height="22" width="60" rx="5" fill="crimson" stroke="red"/>
						<text x="120" y="132" font-size="16" fill="yellow" >STOP</text>
					</g>
		</g>
        		
    </g> 
  </svg>
     
  </div>
   
 </div>

【讨论】：

非常好，漂亮，好答案！我的建议：在最后一个示例中，您可以将按钮移到顶部，因为有人不会在这个小 sn-p 的底部看到它。
好答案！ :) 有点像旧机械表

【解决方案2】：

基本上，有很多方法可以解决这个问题。我不会涵盖所有这些，但这里有一些按有效性排序：

1) 只需使用单独的 SVG 对象

如果您要使用纯 CSS 为纯 SVG（没有像 Snap.svg 之类的库）的不同部分设置动画 - 不要将所有内容混合在一个 SVG 对象中。相反，创建 3 个对象，每个对象都有单独的 viewBox。这样你就可以通过 CSS 动画完全控制它

svg path {
  transform: rotate(0deg);
  transition: 3s;
  transform-origin: center center;
}

svg:hover path {
  transform: rotate(360deg);
}

.cog--middle {
  position: absolute;
  width: 68.8px;
  height: 67.71px;
  left: 17px;
  top: 0px;
}

.cog--left {
  position: absolute;
  width: 40.03px;
  height: 38.8px;
  left: 0px;
  top: 60px;
}

.cog--right {
  position: absolute;
  width: 40.03px;
  height: 38.8px;
  left: 70px;
  top: 55px;
}

<svg class="cog--middle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 68.8 67.71" style="enable-background:new 0 0 68.8 67.71;" xml:space="preserve">
	<path id="wheel1" fill="#1B395D" d="M15.82,13.87c1.75-1.59,3.7-2.97,5.81-4.07l-1.67-7.05L27.69,0l3.58,6.85c1.02-0.11,2.05-0.17,3.1-0.17c1.26,0,2.51,0.09,3.73,0.25l2.55-6.78l7.95,2.04l-0.89,7.93c1.79,0.99,3.45,2.18,4.97,3.53l8-3.29l3.93,7.2l-5.68,4.22c0.05,0.09,0.09,0.18,0.14,0.28c1.03,2.09,1.8,4.33,2.27,6.68l7.48,1l-0.2,8.2l-7.12,0.82c-0.38,2.26-1.03,4.43-1.93,6.46L64.81,51l-5.43,6.15l-5.49-3.62c-0.21,0.21-0.42,0.41-0.63,0.62c-1.56,1.47-3.29,2.77-5.15,3.85l1.12,7.64l-7.94,2.07l-2.64-6.36c-0.36,0.06-0.73,0.11-1.1,0.15c-1.05,0.12-2.11,0.18-3.19,0.18c-1.09,0-2.17-0.06-3.23-0.19l-2.37,5.97l-7.91-2.18l0.87-6.67c-0.19-0.1-0.38-0.2-0.56-0.3c-2.14-1.17-4.1-2.62-5.85-4.29L8.71,57.3l-4.42-6.91l5.2-4.45c-1.05-2.22-1.82-4.61-2.24-7.11L0,37.84l0.2-8.2l7.19-0.83c0.44-2.23,1.15-4.37,2.1-6.37c0.07-0.14,0.13-0.28,0.2-0.42l-5.88-4.87l4.52-6.85L15.82,13.87z M34.36,53.83C45.21,53.83,54,45.03,54,34.18s-8.79-19.64-19.64-19.64s-19.64,8.79-19.64,19.64S23.51,53.83,34.36,53.83z"/>
</svg>

<svg class="cog--left" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 40.03 38.8" style="enable-background:new 0 0 40.03 38.8;" xml:space="preserve">
	<path id="wheel2" fill="#1B395D" d="M34.48,12.91c0.57,1.23,0.98,2.54,1.21,3.89l4.18,0.36l0.15,4.69l-4.41,0.71c-0.12,0.57-0.27,1.14-0.45,1.71c-0.22,0.69-0.49,1.35-0.8,1.98l3.28,2.61L35.1,32.8l-4.21-1.91c-0.87,0.79-1.82,1.48-2.83,2.06l0.4,4.94l-4.67,0.83l-1.32-3.84c-0.06,0.01-0.12,0.02-0.18,0.03c-1.33,0.18-2.71,0.19-4.08,0.03l-1.88,3.88l-4.49-1.59l0.81-4.01c-1.18-0.61-2.26-1.36-3.22-2.21L5.31,32.8l-2.43-4.05l2.97-2.32c-0.08-0.15-0.15-0.3-0.23-0.45c-0.54-1.11-0.94-2.28-1.21-3.49L0,21.7l0.27-4.68l3.98-0.29c0.03-0.21,0.07-0.41,0.11-0.62c0.12-0.59,0.27-1.18,0.47-1.76c0.19-0.59,0.42-1.16,0.68-1.72l-2.87-2.36l2.61-3.9l3.52,1.67c0.09-0.08,0.18-0.17,0.26-0.25c1.03-0.95,2.17-1.75,3.41-2.4l-0.63-4.18l4.6-1.15l1.53,3.63c1.41-0.17,2.87-0.15,4.32,0.07L24.07,0l4.49,1.59l-0.82,4.05c1.15,0.64,2.2,1.41,3.14,2.29c0.07,0.06,0.13,0.12,0.19,0.18L34.8,5.8l2.98,3.69L34.48,12.91z M9.16,15.76c-1.93,5.89,1.36,12.25,7.35,14.2c5.98,1.96,12.39-1.23,14.32-7.12c1.93-5.89-1.36-12.25-7.35-14.2C17.49,6.69,11.08,9.88,9.16,15.76z"/>
</svg>

<svg class="cog--right" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 40.03 38.8" style="enable-background:new 0 0 40.03 38.8;" xml:space="preserve">
	<path id="wheel2" fill="#1B395D" d="M34.48,12.91c0.57,1.23,0.98,2.54,1.21,3.89l4.18,0.36l0.15,4.69l-4.41,0.71c-0.12,0.57-0.27,1.14-0.45,1.71c-0.22,0.69-0.49,1.35-0.8,1.98l3.28,2.61L35.1,32.8l-4.21-1.91c-0.87,0.79-1.82,1.48-2.83,2.06l0.4,4.94l-4.67,0.83l-1.32-3.84c-0.06,0.01-0.12,0.02-0.18,0.03c-1.33,0.18-2.71,0.19-4.08,0.03l-1.88,3.88l-4.49-1.59l0.81-4.01c-1.18-0.61-2.26-1.36-3.22-2.21L5.31,32.8l-2.43-4.05l2.97-2.32c-0.08-0.15-0.15-0.3-0.23-0.45c-0.54-1.11-0.94-2.28-1.21-3.49L0,21.7l0.27-4.68l3.98-0.29c0.03-0.21,0.07-0.41,0.11-0.62c0.12-0.59,0.27-1.18,0.47-1.76c0.19-0.59,0.42-1.16,0.68-1.72l-2.87-2.36l2.61-3.9l3.52,1.67c0.09-0.08,0.18-0.17,0.26-0.25c1.03-0.95,2.17-1.75,3.41-2.4l-0.63-4.18l4.6-1.15l1.53,3.63c1.41-0.17,2.87-0.15,4.32,0.07L24.07,0l4.49,1.59l-0.82,4.05c1.15,0.64,2.2,1.41,3.14,2.29c0.07,0.06,0.13,0.12,0.19,0.18L34.8,5.8l2.98,3.69L34.48,12.91z M9.16,15.76c-1.93,5.89,1.36,12.25,7.35,14.2c5.98,1.96,12.39-1.23,14.32-7.12c1.93-5.89-1.36-12.25-7.35-14.2C17.49,6.69,11.08,9.88,9.16,15.76z"/>
</svg>

2) 务必使用转换框

在大多数情况下，这可以解决问题。如果您需要更广泛的浏览器支持 - 只需为特殊浏览器使用单独的 CSS 类，例如 Edge，具有像素完美的 transform-origin 属性并使用 JS 在类之间切换。

.modern{
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.edge{
  transform-origin: 52px 34px;
}

3) 务必使用 Snap.svg

这个库可以让你轻松地为任何东西制作动画。您只需高枕无忧。

var s = Snap("#svg"),
gear = s.select('#wheel'),
bbox = gear.getBBox();

gear.transform("rotate(0 "+bbox.cx+" "+bbox.cy+")");
gear.animate({ transform: "rotate(3600 "+bbox.cx+" "+bbox.cy+")"}, 50000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>

<svg id="svg"
  width="110px"
  height="100px"
  viewBox="0 0 110 100"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <title>ic--rollout</title>
  <g class="cog--middle">
    <path
      d="M33.6286316,13.9605932 C35.3737066,12.3664297 37.3249373,10.9942262 39.4376676,9.88864575 L37.7639337,2.84180199 L45.4931775,0.0900928417 L49.0720315,6.94284116 C50.0880101,6.82901642 51.1207261,6.7705605 52.1670931,6.7705605 C53.4317563,6.7705605 54.6764785,6.85595112 55.8958106,7.02128212 L58.4472618,0.245430567 L66.3935871,2.28698531 L65.5015991,10.2150059 C67.2900149,11.208746 68.956009,12.3961862 70.4712471,13.7489885 L78.472844,10.4564722 L82.3993634,17.661307 L76.7195784,21.8770189 C76.7662084,21.9692338 76.8123344,22.061747 76.8579526,22.1545548 C77.8852682,24.244573 78.6551102,26.4840416 79.1260955,28.831571 L86.6029963,29.8342633 L86.4016167,38.0374048 L79.2833198,38.8585809 C78.9039047,41.1188654 78.2488189,43.2856361 77.3538253,45.3231245 L82.6154298,51.0936912 L77.189124,57.2481974 L71.7016575,53.6264993 C71.4947362,53.835398 71.2844889,54.0409954 71.0710016,54.2432054 C69.5139432,55.7180126 67.7845278,57.0126257 65.9161266,58.0936683 L67.0389416,65.7326031 L59.0993207,67.8000862 L56.455254,61.4407304 C56.091817,61.4976526 55.7260194,61.5474549 55.3580085,61.5899901 C54.3111517,61.7109872 53.2463841,61.7731797 52.1670931,61.7731797 C51.0760163,61.7731797 49.9997819,61.7096216 48.9418893,61.5860052 L46.5757103,67.5520122 L38.6662197,65.3720638 L39.5343402,58.7054384 C39.3461507,58.6079107 39.1592312,58.5082724 38.9736132,58.4065544 C36.8360572,57.2351814 34.8710875,55.7880122 33.126567,54.1129174 L26.517699,57.3888051 L22.0982404,50.4754646 L27.2985471,46.0207673 C26.2463138,43.7967471 25.4835451,41.4089702 25.0588838,38.9060872 L17.8061497,37.9334569 L18.0075293,29.7303153 L25.1942049,28.9012511 C25.6358466,26.6699551 26.347362,24.5357377 27.2933125,22.5340431 C27.3591986,22.3946237 27.426222,22.2558471 27.4943708,22.1177255 L21.6159342,17.247506 L26.1330259,10.3975792 L33.6286316,13.9605932 Z M52.1670931,53.9156627 C63.0143367,53.9156627 71.807765,45.1208371 71.807765,34.2718701 C71.807765,23.422903 63.0143367,14.6280775 52.1670931,14.6280775 C41.3198495,14.6280775 32.5264212,23.422903 32.5264212,34.2718701 C32.5264212,45.1208371 41.3198495,53.9156627 52.1670931,53.9156627 Z"
      fill="#1B385C"
      id="wheel"
    />
  </g>
  <g class="cog--left">
    <path
      d="M9.03425644,68.7605395 C10.0306523,67.8355529 11.144758,67.0393549 12.3510762,66.3978604 L11.3954144,62.3090478 L15.8086266,60.7124149 L17.8520661,64.6886069 C18.4321654,64.622562 19.0218215,64.5886439 19.6192718,64.5886439 C20.3413641,64.5886439 21.0520705,64.6381904 21.7482798,64.7341209 L23.205097,60.802547 L27.7422576,61.9871248 L27.2329539,66.5872254 C28.2540962,67.1638264 29.2053388,67.8528186 30.0705033,68.6377594 L34.6392226,66.7273322 L36.8811707,70.9078164 L33.6381501,73.3539124 C33.6647747,73.4074185 33.6911115,73.4610977 33.7171585,73.5149479 C34.3037309,74.7276458 34.7432922,76.0270599 35.0122134,77.3891743 L39.2813439,77.9709696 L39.166361,82.7307046 L35.101985,83.2071781 C34.8853478,84.5186703 34.5113096,85.7759026 34.0002898,86.9581209 L37.0045394,90.3063952 L33.9062494,93.877444 L30.773038,91.7760145 C30.6548909,91.8972245 30.5348448,92.016519 30.4129487,92.1338479 C29.5239058,92.98958 28.5364512,93.7407575 27.4696391,94.3680142 L28.1107394,98.8003777 L23.577407,100 L22.0677085,96.3100908 C21.8601947,96.3431189 21.6513331,96.3720158 21.4412077,96.3966962 C20.8434777,96.4669027 20.235521,96.5029888 19.6192718,96.5029888 C18.9962932,96.5029888 18.3817893,96.4661103 17.7777581,96.394384 L16.4267268,99.8560592 L11.910598,98.5911809 L12.4062739,94.7229835 C12.2988222,94.6663948 12.1920957,94.6085813 12.0861123,94.5495611 C10.8656193,93.8698917 9.74366881,93.0301961 8.74758958,92.0582505 L4.97408501,93.9590292 L2.45068049,89.9476796 L5.41993035,87.3629165 C4.8191306,86.0724661 4.38360801,84.6869987 4.14113665,83.2347429 L-1.53588253e-12,82.6703906 L0.114982882,77.9106556 L4.21840174,77.429605 C4.47056851,76.134933 4.87682672,74.8965892 5.41694166,73.7351396 C5.45456105,73.6542439 5.49282981,73.5737211 5.5317411,73.4935783 L2.17529527,70.6677154 L4.75444596,66.6931605 L9.034257,68.7605397 Z M19.6192718,91.9437967 C25.8127869,91.9437967 30.8336229,86.8407471 30.8336229,80.5458164 C30.8336229,74.2508857 25.8127869,69.147836 19.6192718,69.147836 C13.4257568,69.147836 8.40492079,74.2508857 8.40492079,80.5458164 C8.40492079,86.8407471 13.4257568,91.9437967 19.6192718,91.9437967 Z"
      fill="#1B385C"
      id="wheel-copy"
    />
  </g>
  <g class="cog--right">
    <path
      d="M79.7529126,63.3257569 C80.7493084,62.4007703 81.8634142,61.6045723 83.0697323,60.9630778 L82.1140705,56.8742652 L86.5272828,55.2776323 L88.5707222,59.2538243 C89.1508216,59.1877794 89.7404776,59.1538613 90.337928,59.1538613 C91.0600202,59.1538613 91.7707267,59.2034078 92.4669359,59.2993383 L93.9237532,55.3677644 L98.4609137,56.5523422 L97.95161,61.1524428 C98.9727524,61.7290438 99.9239949,62.418036 100.789159,63.2029768 L105.357879,61.2925496 L107.599827,65.4730338 L104.356806,67.9191298 C104.383431,67.9726359 104.409768,68.0263151 104.435815,68.0801653 C105.022387,69.2928632 105.461948,70.5922773 105.73087,71.9543917 L110,72.536187 L109.885017,77.295922 L105.820641,77.7723956 C105.604004,79.0838877 105.229966,80.3411199 104.718946,81.5233383 L107.723196,84.8716126 L104.624905,88.4426614 L101.491694,86.3412319 C101.373547,86.4624419 101.253501,86.5817363 101.131605,86.6990653 C100.242562,87.5547973 99.2551074,88.3059749 98.1882952,88.9332316 L98.8293956,93.3655951 L94.2960631,94.5652174 L92.7863646,90.8753082 C92.5788508,90.9083363 92.3699893,90.9372332 92.1598639,90.9619135 C91.5621338,91.0321201 90.9541772,91.0682062 90.337928,91.0682062 C89.7149494,91.0682062 89.1004454,91.0313277 88.4964142,90.9596014 L87.145383,94.4212766 L82.6292541,93.1563982 L83.12493,89.2882008 C83.0174784,89.2316122 82.9107518,89.1737987 82.8047684,89.1147785 C81.5842754,88.4351091 80.4623249,87.5954134 79.4662457,86.6234679 L75.6927412,88.5242466 L73.1693366,84.512897 L76.1385865,81.9281339 C75.5377867,80.6376835 75.1022641,79.2522161 74.8597928,77.7999603 L70.7186561,77.235608 L70.833639,72.475873 L74.9370579,71.9948224 C75.1892246,70.7001504 75.5954829,69.4618066 76.1355978,68.300357 C76.1732172,68.2194613 76.2114859,68.1389385 76.2503972,68.0587957 L72.8939514,65.2329328 L75.4731021,61.2583779 L79.7529131,63.3257571 Z M90.337928,86.5090141 C96.531443,86.5090141 101.552279,81.4059645 101.552279,75.1110338 C101.552279,68.816103 96.531443,63.7130534 90.337928,63.7130534 C84.1444129,63.7130534 79.1235769,68.816103 79.1235769,75.1110338 C79.1235769,81.4059645 84.1444129,86.5090141 90.337928,86.5090141 Z"
      fill="#1B385C"
      id="wheel-copy-2"
    />
  </g>
</svg>

4) 制作 SVG 动画

正如@Alexandr_T 建议的那样，使用没有 CSS 的纯 SVG 动画。这与之前的解决方案相同，但不是放松，而是您自己进行复杂的计算。

【讨论】：

@Alexandr_TT 我已经为第 1 点和第 3 点添加了 sn-ps 给你一个例子

【解决方案3】：

考虑到您试图避免使用transform-box，实现所需结果的一种方法是使用percentage 值来玩弄transform-origin 属性

.cog--middle {
  transform: rotate(0deg);
  transition: 0.3s;
  transform-origin: 47% 34%;
}

svg:hover .cog--middle {
  transform: rotate(360deg);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <svg width="110px" height="100px" viewBox="0 0 110 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>ic--rollout</title>
      <g class="cog--middle">
        <path d="M33.6286316,13.9605932 C35.3737066,12.3664297 37.3249373,10.9942262 39.4376676,9.88864575 L37.7639337,2.84180199 L45.4931775,0.0900928417 L49.0720315,6.94284116 C50.0880101,6.82901642 51.1207261,6.7705605 52.1670931,6.7705605 C53.4317563,6.7705605 54.6764785,6.85595112 55.8958106,7.02128212 L58.4472618,0.245430567 L66.3935871,2.28698531 L65.5015991,10.2150059 C67.2900149,11.208746 68.956009,12.3961862 70.4712471,13.7489885 L78.472844,10.4564722 L82.3993634,17.661307 L76.7195784,21.8770189 C76.7662084,21.9692338 76.8123344,22.061747 76.8579526,22.1545548 C77.8852682,24.244573 78.6551102,26.4840416 79.1260955,28.831571 L86.6029963,29.8342633 L86.4016167,38.0374048 L79.2833198,38.8585809 C78.9039047,41.1188654 78.2488189,43.2856361 77.3538253,45.3231245 L82.6154298,51.0936912 L77.189124,57.2481974 L71.7016575,53.6264993 C71.4947362,53.835398 71.2844889,54.0409954 71.0710016,54.2432054 C69.5139432,55.7180126 67.7845278,57.0126257 65.9161266,58.0936683 L67.0389416,65.7326031 L59.0993207,67.8000862 L56.455254,61.4407304 C56.091817,61.4976526 55.7260194,61.5474549 55.3580085,61.5899901 C54.3111517,61.7109872 53.2463841,61.7731797 52.1670931,61.7731797 C51.0760163,61.7731797 49.9997819,61.7096216 48.9418893,61.5860052 L46.5757103,67.5520122 L38.6662197,65.3720638 L39.5343402,58.7054384 C39.3461507,58.6079107 39.1592312,58.5082724 38.9736132,58.4065544 C36.8360572,57.2351814 34.8710875,55.7880122 33.126567,54.1129174 L26.517699,57.3888051 L22.0982404,50.4754646 L27.2985471,46.0207673 C26.2463138,43.7967471 25.4835451,41.4089702 25.0588838,38.9060872 L17.8061497,37.9334569 L18.0075293,29.7303153 L25.1942049,28.9012511 C25.6358466,26.6699551 26.347362,24.5357377 27.2933125,22.5340431 C27.3591986,22.3946237 27.426222,22.2558471 27.4943708,22.1177255 L21.6159342,17.247506 L26.1330259,10.3975792 L33.6286316,13.9605932 Z M52.1670931,53.9156627 C63.0143367,53.9156627 71.807765,45.1208371 71.807765,34.2718701 C71.807765,23.422903 63.0143367,14.6280775 52.1670931,14.6280775 C41.3198495,14.6280775 32.5264212,23.422903 32.5264212,34.2718701 C32.5264212,45.1208371 41.3198495,53.9156627 52.1670931,53.9156627 Z" fill="#1B385C" id="wheel"></path>
      </g>
      <g class="cog--left">
        <path d="M9.03425644,68.7605395 C10.0306523,67.8355529 11.144758,67.0393549 12.3510762,66.3978604 L11.3954144,62.3090478 L15.8086266,60.7124149 L17.8520661,64.6886069 C18.4321654,64.622562 19.0218215,64.5886439 19.6192718,64.5886439 C20.3413641,64.5886439 21.0520705,64.6381904 21.7482798,64.7341209 L23.205097,60.802547 L27.7422576,61.9871248 L27.2329539,66.5872254 C28.2540962,67.1638264 29.2053388,67.8528186 30.0705033,68.6377594 L34.6392226,66.7273322 L36.8811707,70.9078164 L33.6381501,73.3539124 C33.6647747,73.4074185 33.6911115,73.4610977 33.7171585,73.5149479 C34.3037309,74.7276458 34.7432922,76.0270599 35.0122134,77.3891743 L39.2813439,77.9709696 L39.166361,82.7307046 L35.101985,83.2071781 C34.8853478,84.5186703 34.5113096,85.7759026 34.0002898,86.9581209 L37.0045394,90.3063952 L33.9062494,93.877444 L30.773038,91.7760145 C30.6548909,91.8972245 30.5348448,92.016519 30.4129487,92.1338479 C29.5239058,92.98958 28.5364512,93.7407575 27.4696391,94.3680142 L28.1107394,98.8003777 L23.577407,100 L22.0677085,96.3100908 C21.8601947,96.3431189 21.6513331,96.3720158 21.4412077,96.3966962 C20.8434777,96.4669027 20.235521,96.5029888 19.6192718,96.5029888 C18.9962932,96.5029888 18.3817893,96.4661103 17.7777581,96.394384 L16.4267268,99.8560592 L11.910598,98.5911809 L12.4062739,94.7229835 C12.2988222,94.6663948 12.1920957,94.6085813 12.0861123,94.5495611 C10.8656193,93.8698917 9.74366881,93.0301961 8.74758958,92.0582505 L4.97408501,93.9590292 L2.45068049,89.9476796 L5.41993035,87.3629165 C4.8191306,86.0724661 4.38360801,84.6869987 4.14113665,83.2347429 L-1.53588253e-12,82.6703906 L0.114982882,77.9106556 L4.21840174,77.429605 C4.47056851,76.134933 4.87682672,74.8965892 5.41694166,73.7351396 C5.45456105,73.6542439 5.49282981,73.5737211 5.5317411,73.4935783 L2.17529527,70.6677154 L4.75444596,66.6931605 L9.034257,68.7605397 Z M19.6192718,91.9437967 C25.8127869,91.9437967 30.8336229,86.8407471 30.8336229,80.5458164 C30.8336229,74.2508857 25.8127869,69.147836 19.6192718,69.147836 C13.4257568,69.147836 8.40492079,74.2508857 8.40492079,80.5458164 C8.40492079,86.8407471 13.4257568,91.9437967 19.6192718,91.9437967 Z" fill="#1B385C" id="wheel-copy"></path>
      </g>
      <g class="cog--right">
        <path d="M79.7529126,63.3257569 C80.7493084,62.4007703 81.8634142,61.6045723 83.0697323,60.9630778 L82.1140705,56.8742652 L86.5272828,55.2776323 L88.5707222,59.2538243 C89.1508216,59.1877794 89.7404776,59.1538613 90.337928,59.1538613 C91.0600202,59.1538613 91.7707267,59.2034078 92.4669359,59.2993383 L93.9237532,55.3677644 L98.4609137,56.5523422 L97.95161,61.1524428 C98.9727524,61.7290438 99.9239949,62.418036 100.789159,63.2029768 L105.357879,61.2925496 L107.599827,65.4730338 L104.356806,67.9191298 C104.383431,67.9726359 104.409768,68.0263151 104.435815,68.0801653 C105.022387,69.2928632 105.461948,70.5922773 105.73087,71.9543917 L110,72.536187 L109.885017,77.295922 L105.820641,77.7723956 C105.604004,79.0838877 105.229966,80.3411199 104.718946,81.5233383 L107.723196,84.8716126 L104.624905,88.4426614 L101.491694,86.3412319 C101.373547,86.4624419 101.253501,86.5817363 101.131605,86.6990653 C100.242562,87.5547973 99.2551074,88.3059749 98.1882952,88.9332316 L98.8293956,93.3655951 L94.2960631,94.5652174 L92.7863646,90.8753082 C92.5788508,90.9083363 92.3699893,90.9372332 92.1598639,90.9619135 C91.5621338,91.0321201 90.9541772,91.0682062 90.337928,91.0682062 C89.7149494,91.0682062 89.1004454,91.0313277 88.4964142,90.9596014 L87.145383,94.4212766 L82.6292541,93.1563982 L83.12493,89.2882008 C83.0174784,89.2316122 82.9107518,89.1737987 82.8047684,89.1147785 C81.5842754,88.4351091 80.4623249,87.5954134 79.4662457,86.6234679 L75.6927412,88.5242466 L73.1693366,84.512897 L76.1385865,81.9281339 C75.5377867,80.6376835 75.1022641,79.2522161 74.8597928,77.7999603 L70.7186561,77.235608 L70.833639,72.475873 L74.9370579,71.9948224 C75.1892246,70.7001504 75.5954829,69.4618066 76.1355978,68.300357 C76.1732172,68.2194613 76.2114859,68.1389385 76.2503972,68.0587957 L72.8939514,65.2329328 L75.4731021,61.2583779 L79.7529131,63.3257571 Z M90.337928,86.5090141 C96.531443,86.5090141 101.552279,81.4059645 101.552279,75.1110338 C101.552279,68.816103 96.531443,63.7130534 90.337928,63.7130534 C84.1444129,63.7130534 79.1235769,68.816103 79.1235769,75.1110338 C79.1235769,81.4059645 84.1444129,86.5090141 90.337928,86.5090141 Z" fill="#1B385C" id="wheel-copy-2"></path>
      </g>
  </svg>

</body>
</html>

【讨论】：

我可以知道转换原点值的计算依据是什么吗？
@Benjamin 整个 SVG，为 svg 添加边框并基于该矩形
@Benjamin transform-origin 从元素的左上角开始计算，在元素的左上角是0, 0，在元素的中心点（垂直和水平方向）是50%, 50%。您也可以指定像素值，您可以阅读它here