我怎样才能让这个 svg 元素从中心旋转答案

【问题标题】：How can i get this svg element to rotate from the center我怎样才能让这个 svg 元素从中心旋转
【发布时间】：2020-04-04 14:35:26
【问题描述】：

我对使用 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;
}

【问题讨论】：

标签： html css svg adobe-illustrator

【解决方案1】：

如您在此屏幕截图中所见，#turbine 元素并非完全平方：

如果您可以在 illustrator 中旋转 svg，使其起始位置的宽度与高度相同，那么您就有了一个完美的旋转风力涡轮机。

【讨论】：

啊，你的意思是我在 Illustrator 中选择元素并旋转它，这是一些很好的建议。是的，我可以看到它已关闭，谢谢这对我有很大帮助！！！

【解决方案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>

【讨论】：

【解决方案3】：

由于涡轮的连接点不在其画布的中心，您需要手动调整transform-origin：

有了这些坐标

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

涡轮会正常旋转

【讨论】：