我该如何使svg元素从中心旋转

Question

我对使用svg完全陌生，我正在尝试使这台风力发电机从中心旋转，但其旋转奇怪。我正在从Illustrator中创建svg，我是否需要在画板上将元素居中以使其从该中心旋转，或者这样做的首选方式是什么？

这里是Codepen

<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，使其起始位置与高度相同，则您将拥有一个完美的旋转风力涡轮机。