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

2024-04-03

我正在尝试制作一个悬停效果，它将三个不同的 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>

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

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

画出齿轮的外轮廓

当圆的半径R = 60px周长将是

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

找出有 24 个齿轮齿时扇形的长度376,98 / 24 = 15,71

Formula 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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

SVG

cssanimations

无法根据中心原点旋转齿轮的相关文章

如何使用XPath选择非空段落？

我想要抓取的网页具有类似的结构每个都有一个段落是一个问题一个段落是一个答案我想抓取每个问题和答案并将它们存储在两个项目中问题是在某些页面上问题和答案分别是 xxx p 1 and xxx p 2 但在其他页面上 xxx p 1
电子邮件链接在 Android 上不起作用

我有 HTML 格式的点击电子邮件链接的代码它在我的电脑上运行良好但在移动设备上不起作用我只有 Android 所以我不知道问题是否仅在 Android 上或所有移动设备上当我按下链接时浏览器显示网页无法显示邮寄至电子邮件受
将 HTML 'label' 标签与单选按钮一起使用

是否label标签与单选按钮一起使用吗如果是这样你如何使用它我有一个显示如下的表单 First Name text field Hair Color color drop down Description text area Salu
重新创建 CSS3 过渡三次贝塞尔曲线

在 CSS3 过渡中您可以将计时函数指定为 cubic bezier 0 25 0 3 0 8 1 0 在该字符串中您仅指定曲线上点 P1 和 P2 的 XY 因为 P0 和 P3 始终分别为 0 0 0 0 和 1 0 1 0 根据苹
html5 canvas 上的错误显示 lineWidth=1

I have example https developer mozilla org samples canvas tutorial 4 5 canvas linewidth html https developer mozilla org
LESS CSS 语法对现代化很有用

通常我使用现代化 http modernizr com 了解浏览器的功能同时我用LESS CSS http lesscss org 使我的CSS更具可读性和可维护性使用 LESS 嵌套规则的常见样式如下所示 header color
类方法作为 JavaScript 中的事件处理程序？

JavaScript 中是否有最佳实践或通用方法将类成员作为事件处理程序考虑以下简单示例
未捕获的 TypeMismatchError：无法在“CanvasRenderingContext2D”上执行“drawImage”

我对以下代码片段有疑问 var o inserted motive find span contains document documentElement o 0 b fillText m i h b drawImage d i h e f
Gmail 无法在电子邮件上正确呈现字体

我已经建立了一个 html 电子邮件并使用了 Google 字体我已使用以下方法将字体包含在 head 标签中 if mso endif 并使用字体即我这样做了
iPad - 无法在框架内滚动

我无法滚动 iPad Safari 中框架内调用的 pdf 我已经尝试过两件事 2 指滚动使用对象嵌入代替框架但这是行不通的事实上我已经尝试了很多东西溢出高度等等请帮我先感谢您根据这篇文章http support appl
CSS3变换：悬停时翻译，带有过渡[重复]

这个问题在这里已经有答案了这应该很简单我的 HTML 中有一堆锚点如下所示 a href Link 1 a a href Link 2 a a href Link 3 a a href Link 4 a a href Link 5 a
如何在没有 JavaScript 的情况下预加载图像？

在我的 HTML 页面之一上当我将鼠标悬停在某些链接上时会显示一些大图像并且加载这些图像需要一些时间我不想使用 JavaScript 来预加载图像有什么好的解决办法吗 HTML5 有一种新方法可以做到这一点即link prefe
您可以将现有的 div 复制到模式对话框吗

我有一个带有多个面板的仪表板来显示不同的信息我希望能够添加一个按钮来以模式显示面板我正在使用引导程序我所能找到的只是已经编写的模态我想复制作为面板的 div 标签的内容然后将其显示在模型中但我不确定如何进行该面板的 html
HTML5 支持命名空间吗？

我们是否可以使用新标签来扩展 HTML5 例如
如何在php中使用一张图像绘制形状

我需要使用图像的一部分来创建帧图像例如用户将从后端上传图像片段现在我需要根据前端用户的要求在前端创建一个框架用户将选择框架的高度和宽度然后他将选择该图像片段如下所示我没有办法做到这一点我尝试通过 css 和 html can
可以使用带有 HTML5 播放器的 Amazon S3/CloudFront 流式传输视频吗？

我想使用 HTML5 视频播放器并流式传输视频 S3 CloudFront 可以实现这一点吗我了解 Amazon 使用 RTMP 流媒体协议和 HTML5video标签不支持 RTMP 有没有办法用 HTML5 播放器播放视频 Wayne
CSS - div 与父 div 底部对齐（内联块）

我知道这个 html 很草率有一些不必要的额外 div 但无论如何我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐您可以看到文本与下面的 jsfiddle 示例的底部有什么想法可以让
不使用控件时，视频元素在 Chrome 中消失

So I think这是一个浏览器错误它出现在一个更复杂的设计网站中但我已经进行了很好的尝试简化了我的代码和设计等并发现了以下内容嵌入时
D3 将现有 SVG 字符串（或元素）追加（插入）到 DIV

我到处寻找这个问题的答案并找到了一些我认为可能有用的资源但最终没有让我找到答案这里有一些外部SVG http bl ocks org mbostock 1014829 嵌入SVG https stackoverflow com qu
使用 VBA 通过 Access 导航网页/操作 IE

你好 StackOverflow 社区我有一个关于使用 Access VBA 操作 IE 的问题本质上我正在尝试编写代码使用 IE 打开特定网页在该页面中搜索特定链接目标链接的名称将取决于用户的情况通过以编程方式单击该链接导航

随机推荐

javascript 字符串中的空值

在 javascript 中我有以下内容 var inf id city 如果 id 或 city 为 null 则 inf 将为 null 有没有什么巧妙的方式来表示如果 id 或 city 为 null 则将其设为空白我知道在 c 中
使用 ML Kit 扫描条形码时出现黑屏而不是 QR 扫描仪

在 Android 中创建条形码扫描仪的最简单方法可能是使用 Google Code Scanner APIhttps developers google com ml kit vision barcode scanning code sc
如何使 T-SQL 游标更快？

我在 SQL Server 2000 下的存储过程中有一个游标现在无法更新它更新所有表但通常需要几分钟才能完成我需要让它更快而 GDEPO 入口仓库 CDEPO 出口仓库 Adet 数量 E CIKAN 已使用的数量记录说明 2
mySQL 获取某些行的所有可能组合

我在 mySQL 中有一个奇怪的请求我发现了很多方法可以通过添加更多连接来对组合对或某个其他数字执行此操作但我想知道是否有一种动态方法可以对任意数量的组合执行此操作解释一下我是否有一个表 table 有 1 列 column id 和
无法返回json数据，WCF Restful Service .NET 4.0

我最近使用 Entity Framework 4 0 设置了 WCF Restful 服务它与 XML 完美配合但是当我尝试以 json 格式返回它时我得到了 HTTP 1 1 504 Fiddler Receive Failure
精确肤色 HSV 范围

我已经看到关于皮肤 HSV 颜色空间范围的所有问题但我只能弄清楚这个 Code CvScalar hsv min cvScalar 0 30 60 0 CvScalar hsv max cvScalar 20 150 255 0 range
如何从 WC_Subscription 实例对象获取订单详细信息

这用于完成初始订阅付款和订阅续订 function payment made subscription How do I get the order details add action woocommerce subscription p
使用另一个按钮切换引导按钮下拉菜单

当单击另一个按钮时获取 Bootstrap 按钮下拉菜单进行切换使列表项和下拉 ul 元素可见时遇到一些问题这是我到目前为止似乎不起作用的内容 v3 3 7 我想要测试按钮另外切换测试按钮下拉列表 div class btn
rdd后面的数字是什么意思

rdd后面括号里的数字是什么意思 RDD后面的数字是它的标识符 Welcome to version 2 3 0 Using Scala version 2 11 8 OpenJDK 64 Bit Server VM Java 1 8 0
无法使用python列出谷歌驱动器中的文件

不确定这是否与我的代码或 Google 方面的某些内容有关但是我可以将文件推送到驱动器但由于某种原因我无法列出文件夹内的文件文件夹元数据这是我正在使用的代码 SCOPES https www googleapis com auth
Spring Boot - @Value 注释不起作用

我尝试使用 SmtpAuthenticator 创建邮件服务组件已正确启动但用户名和密码字段中存在空值为什么 Component public class SmtpAuthenticator extends Authenticator
m2e 连接器 buildhelper 与 Eclipse Juno SR1 m2e 1.2 不兼容

Update 将解决方案移至答案 Eclipse Juno SR1 安装 m2e 插件版本 1 2 m2e 连接器buildhelperEclipse 市场提供的与此版本的 m2e 插件不兼容我一直在浏览各种邮件列表但找不到更新的构建帮
Angular2：如何操作 url 查询字符串？

在角 1 中有一个 location search 可以操作 URL 查询字符串的函数 Angular2 等价于什么 I tried import Location from angular2 angular2 and import UR
使用 numpy 拟合数据

我有以下数据 gt gt gt x array 3 08 3 1 3 12 3 14 3 16 3 18 3 2 3 22 3 24 3 26 3 28 3 3 3 32 3 34 3 36 3 38 3 4 3 42 3 44 3 46
未接听电话的通话计费 - Twilio

我正在使用此代码进行传出浏览器调用link https www twilio com docs quickstart php client outgoing calls 我使用的代码与链接中所示的代码相同也使用 twiML 应用程序我正
使用经典 ASP 发送“application/soap+xml”SOAP 请求

如有任何帮助我们将不胜感激我已经做了几天了下面是我到目前为止得到的代码不幸的是当我运行它时我收到 HTTP 415 错误无法处理消息因为内容类型为 text xml charset UTF 8 不是预期的类型 applica
填充图中水平线上方和下方的区域

我想填充两条水平线上方和下方的区域这就是我想出的 par mfrow c 1 2 x lt seq 1 24 1 y lt rnorm 24 10 2 for i in 1 2 plot x y ylim c 4 16 lines x y
如何从数据流中的PCollection读取bigQuery

我有一个从 pubsub 获得的对象 PCollection 比如说 PCollection
如何根据第 i 个字段的值对 numpy 数组进行切片？

我有一个 2D numpy 数组有 4 列和很多行 gt 10000 这个数字不固定我需要创建n按其中一列的值划分子数组我发现的最接近的问题是如何按列值对 Numpy 数组进行切片 https stackoverflow com qu
无法根据中心原点旋转齿轮

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

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

准备好一对齿轮

三档

行星传动示例

无法根据中心原点旋转齿轮 的相关文章

随机推荐

热门标签

无法根据中心原点旋转齿轮的相关文章