我怎樣才能讓這個 svg 元素從中心旋轉

Question

我對使用 svg 完全陌生，我試圖讓這個風力渦輪機從中心旋轉，但它的旋轉很奇怪。 我正在從 Illustrator 創建 svg，我是否需要將畫板中的元素居中以使其從該中心旋轉，或者這樣做的首選方法是什么？

這是一個代碼筆

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18.79 18.62" style="enable-background:new 0 0 18.79 18.62;" xml:space="preserve"> <g id="pillar"> <path class="st0" d="M9.77,13.71c-0.4-0.19-1.03-3.23-1.06-3.58C8.68,9.78,8.8,8.72,8.92,8.01c0.02-0.13,0.04-0.21,0.06-0.3 c0.1-0.41,0.19-0.47,0.19-0.47l0.92-0.05l-0.08-0.54c-0.08-0.54-0.85-0.54-0.93,0L7.46,18.08c-0.04,0.28,0.18,0.53,0.46,0.53h3.26 c0.28,0,0.5-0.25,0.46-0.53l-0.62-4.36C10.59,13.81,10.03,13.83,9.77,13.71z" /> <path class="st0" d="M8.98,8.7c-0.02,0.09-0.04,0.18-0.06,0.3c-0.11,0.71-0.24,1.78-0.21,2.12c0.03,0.34,0.66,3.39,1.06,3.58 c0.26,0.12,0.82,0.1,1.25,0.02l-0.84-5.9C9.77,8.98,9.32,8.94,8.98,8.7z" /> <path class="st0" d="M8.98,8.7c0.34,0.24,0.79,0.28,1.21,0.12L10.1,8.18L9.17,8.24C9.17,8.24,9.08,8.3,8.98,8.7z" /> </g> <path id="shadow" class="st1" d="M10.19,7.82L10.1,7.18L9.17,7.24c0,0-0.1,0.06-0.19,0.47c-0.02,0.09-0.04,0.18-0.06,0.3 C8.8,8.72,8.68,9.78,8.71,10.13c0.03,0.34,0.66,3.39,1.06,3.58c0.26,0.12,0.82,0.1,1.25,0.02L10.19,7.82z" /> <g id="turbine"> <g> <path class="st0" d="M8.44,5.48C8.36,5.44,8.28,5.4,8.15,5.36C7.47,5.1,6.43,4.76,6.08,4.72C5.73,4.68,2.52,4.66,2.23,5.01 C1.95,5.35,1.82,6.49,1.97,6.76C2.12,7.04,2.98,7.2,3.47,7.29c0.5,0.09,3.05,0.82,3.56,0.65C7.54,7.77,7.69,7.8,7.81,7.58 c0.06-0.11,0.28-0.26,0.47-0.37C8.19,7.1,8.12,6.99,8.07,6.85C7.9,6.35,8.07,5.81,8.44,5.48z" /> <path class="st1" d="M8.86,5.77c0,0-0.04-0.11-0.42-0.29C8.07,5.81,7.9,6.35,8.07,6.85C8.12,6.99,8.19,7.1,8.28,7.21 c0.18-0.1,0.35-0.18,0.35-0.18L8.86,5.77z" /> </g> <g> <path class="st0" d="M10.54,7.32c0.09,0.03,0.18,0.05,0.3,0.08c0.72,0.14,1.8,0.31,2.15,0.3c0.35-0.02,3.52-0.52,3.75-0.91 c0.22-0.39,0.17-1.53-0.02-1.78s-1.07-0.26-1.57-0.27c-0.51-0.01-3.14-0.31-3.62-0.06c-0.47,0.25-0.63,0.24-0.71,0.48 c-0.04,0.12-0.23,0.3-0.41,0.44c0.1,0.09,0.2,0.19,0.26,0.32C10.93,6.38,10.85,6.94,10.54,7.32z" /> <path class="st1" d="M10.07,7.11c0,0,0.06,0.1,0.46,0.21c0.32-0.39,0.39-0.94,0.14-1.41c-0.07-0.13-0.16-0.23-0.26-0.32 c-0.16,0.13-0.32,0.24-0.32,0.24L10.07,7.11z" /> </g> <g> <path class="st0" d="M8.87,8.02c0,0.09,0,0.18,0.02,0.31c0.07,0.73,0.23,1.81,0.35,2.14c0.12,0.33,1.54,3.21,1.98,3.31 c0.44,0.1,1.51-0.29,1.69-0.55c0.18-0.26-0.06-1.1-0.2-1.58c-0.14-0.49-0.63-3.09-1.01-3.47c-0.38-0.38-0.42-0.53-0.67-0.53 c-0.13,0-0.35-0.13-0.54-0.26c-0.06,0.12-0.13,0.24-0.23,0.35C9.88,8.12,9.33,8.21,8.87,8.02z" /> <path class="st1" d="M8.93,7.52c0,0-0.08,0.08-0.07,0.51c0.46,0.19,1.01,0.1,1.39-0.28c0.1-0.1,0.17-0.22,0.23-0.35 c-0.18-0.12-0.32-0.23-0.32-0.23L8.93,7.52z" /> </g> <circle class="st0" cx="9.4" cy="6.58" r="1.12" /> </g> <g id="wind"> <path class="st2" d="M15.23,3.75h2.68c0.35-0.05,0.6-0.32,0.63-0.63c0.03-0.4-0.33-0.76-0.74-0.74c-0.34,0.02-0.64,0.3-0.67,0.67" /> <path class="st2" d="M13.57,11.34h2.68c0.35-0.05,0.6-0.32,0.63-0.63c0.03-0.4-0.33-0.76-0.74-0.74c-0.34,0.02-0.64,0.3-0.67,0.67" /> <path class="st2" d="M0.78,10.13h2.68c0.35-0.05,0.6-0.32,0.63-0.63c0.03-0.4-0.33-0.76-0.74-0.74c-0.34,0.02-0.64,0.3-0.67,0.67" /> <path class="st2" d="M1.31,11.18h2.68c0.35,0.05,0.6,0.32,0.63,0.63c0.03,0.4-0.33,0.76-0.74,0.74c-0.34-0.02-0.64-0.3-0.67-0.67" /> <line class="st2" x1="0.25" y1="2.23" x2="4.74" y2="2.23" /> <line class="st2" x1="14.17" y1="6.35" x2="16.06" y2="6.35" /> </g> </svg>

 body, html { height: 100%; margin: 0; padding: 0; } body { display: flex; align-items: center; justify-content: center; background: white; width: 100%; } svg { width: 150px; height: 150px; } svg #turbine { animation: rotate 3s linear infinite; transform-box: fill-box; transform-origin: center; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .st0 { fill: #ff0000; } .st1 { fill: #af0000; } .st2 { fill: none; stroke: #0071bc; stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 100; }

Answer 1

正如您在此屏幕截圖中看到的那樣，#turbine 元素不是完全平方的：

如果您可以在 illustrator 中旋轉 svg，使其起始位置的寬度與高度相同，那么您就有了一個完美的旋轉風力渦輪機。

Answer 2

調整變換原點：

 body, html { height: 100%; margin: 0; padding: 0; } body { display: flex; align-items: center; justify-content: center; background: white; width: 100%; } svg { width: 150px; height: 150px; } svg #turbine { animation: rotate 3s linear infinite; transform-box: fill-box; transform-origin: 60% 48.5%; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .st0 { fill: #ff0000; } .st1 { fill: #af0000; } .st2 { fill: none; stroke: #0071bc; stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 100; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18.79 18.62" style="enable-background:new 0 0 18.79 18.62;" xml:space="preserve"> <g id="pillar"> <path class="st0" d="M9.77,13.71c-0.4-0.19-1.03-3.23-1.06-3.58C8.68,9.78,8.8,8.72,8.92,8.01c0.02-0.13,0.04-0.21,0.06-0.3 c0.1-0.41,0.19-0.47,0.19-0.47l0.92-0.05l-0.08-0.54c-0.08-0.54-0.85-0.54-0.93,0L7.46,18.08c-0.04,0.28,0.18,0.53,0.46,0.53h3.26 c0.28,0,0.5-0.25,0.46-0.53l-0.62-4.36C10.59,13.81,10.03,13.83,9.77,13.71z"/> <path class="st0" d="M8.98,8.7c-0.02,0.09-0.04,0.18-0.06,0.3c-0.11,0.71-0.24,1.78-0.21,2.12c0.03,0.34,0.66,3.39,1.06,3.58 c0.26,0.12,0.82,0.1,1.25,0.02l-0.84-5.9C9.77,8.98,9.32,8.94,8.98,8.7z"/> <path class="st0" d="M8.98,8.7c0.34,0.24,0.79,0.28,1.21,0.12L10.1,8.18L9.17,8.24C9.17,8.24,9.08,8.3,8.98,8.7z"/> </g> <path id="shadow" class="st1" d="M10.19,7.82L10.1,7.18L9.17,7.24c0,0-0.1,0.06-0.19,0.47c-0.02,0.09-0.04,0.18-0.06,0.3 C8.8,8.72,8.68,9.78,8.71,10.13c0.03,0.34,0.66,3.39,1.06,3.58c0.26,0.12,0.82,0.1,1.25,0.02L10.19,7.82z"/> <g id="turbine"> <g> <path class="st0" d="M8.44,5.48C8.36,5.44,8.28,5.4,8.15,5.36C7.47,5.1,6.43,4.76,6.08,4.72C5.73,4.68,2.52,4.66,2.23,5.01 C1.95,5.35,1.82,6.49,1.97,6.76C2.12,7.04,2.98,7.2,3.47,7.29c0.5,0.09,3.05,0.82,3.56,0.65C7.54,7.77,7.69,7.8,7.81,7.58 c0.06-0.11,0.28-0.26,0.47-0.37C8.19,7.1,8.12,6.99,8.07,6.85C7.9,6.35,8.07,5.81,8.44,5.48z"/> <path class="st1" d="M8.86,5.77c0,0-0.04-0.11-0.42-0.29C8.07,5.81,7.9,6.35,8.07,6.85C8.12,6.99,8.19,7.1,8.28,7.21 c0.18-0.1,0.35-0.18,0.35-0.18L8.86,5.77z"/> </g> <g> <path class="st0" d="M10.9,6.13c0.08-0.05,0.16-0.1,0.26-0.17c0.59-0.43,1.44-1.12,1.67-1.39c0.23-0.27,1.99-2.95,1.85-3.38 C14.54,0.75,13.66,0.03,13.35,0s-0.91,0.61-1.26,0.98c-0.35,0.37-2.35,2.11-2.48,2.63C9.48,4.13,9.37,4.23,9.49,4.46 c0.06,0.11,0.06,0.37,0.05,0.59c0.14-0.01,0.28-0.01,0.42,0.02C10.47,5.21,10.83,5.63,10.9,6.13z"/> <path class="st1" d="M10.43,6.33c0,0,0.11,0.02,0.47-0.2c-0.07-0.49-0.43-0.92-0.94-1.06C9.82,5.04,9.68,5.04,9.54,5.05 C9.53,5.26,9.5,5.44,9.5,5.44L10.43,6.33z"/> </g> <g> <path class="st0" d="M9.17,8.08c0,0.09,0,0.18,0.02,0.31c0.07,0.73,0.23,1.81,0.35,2.14c0.12,0.33,1.54,3.21,1.98,3.31 c0.44,0.1,1.51-0.29,1.69-0.55s-0.06-1.1-0.2-1.58c-0.14-0.49-0.63-3.09-1.01-3.47c-0.38-0.38-0.42-0.53-0.67-0.53 c-0.13,0-0.35-0.13-0.54-0.26c-0.06,0.12-0.13,0.24-0.23,0.35C10.18,8.17,9.63,8.27,9.17,8.08z"/> <path class="st1" d="M9.23,7.57c0,0-0.08,0.08-0.07,0.51c0.46,0.19,1.01,0.1,1.39-0.28c0.1-0.1,0.17-0.22,0.23-0.35 c-0.18-0.12-0.32-0.23-0.32-0.23L9.23,7.57z"/> </g> <circle class="st0" cx="9.56" cy="6.58" r="1.12"/> </g> <g id="wind"> <path class="st2" d="M15.23,3.75h2.68c0.35-0.05,0.6-0.32,0.63-0.63c0.03-0.4-0.33-0.76-0.74-0.74c-0.34,0.02-0.64,0.3-0.67,0.67" /> <path class="st2" d="M13.57,11.34h2.68c0.35-0.05,0.6-0.32,0.63-0.63c0.03-0.4-0.33-0.76-0.74-0.74c-0.34,0.02-0.64,0.3-0.67,0.67" /> <path class="st2" d="M0.78,10.13h2.68c0.35-0.05,0.6-0.32,0.63-0.63c0.03-0.4-0.33-0.76-0.74-0.74c-0.34,0.02-0.64,0.3-0.67,0.67" /> <path class="st2" d="M1.31,11.18h2.68c0.35,0.05,0.6,0.32,0.63,0.63c0.03,0.4-0.33,0.76-0.74,0.74c-0.34-0.02-0.64-0.3-0.67-0.67" /> <line class="st2" x1="0.25" y1="2.23" x2="4.74" y2="2.23"/> <line class="st2" x1="14.17" y1="6.35" x2="16.06" y2="6.35"/> </g> </svg> </body> </html>

Answer 3

由於渦輪機的連接點不在其畫布的中心，您需要手動調整transform-origin ：

有了這些坐標

svg #turbine {
  animation: rotate 3s linear infinite;
  transform-origin: 51% 35%;
}

渦輪將正確旋轉