我怎样才能让这个 svg 元素从中心旋转
How can i get this svg element to rotate from the center
我对使用 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;
}
#turbine 元素不是完全正方形，如您在此屏幕截图中所见：
如果您可以在 illustrator 中旋转您的 svg，使其起始位置的宽度与高度相同，那么您就有了一个完美的旋转风力涡轮机。
由于涡轮的连接点不在它的中心 canvas 你需要手动调整 transform-origin:
有了这些坐标
svg #turbine {
animation: rotate 3s linear infinite;
transform-origin: 51% 35%;
}
涡轮会正常旋转
调整变换原点：
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>
我对使用 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;
}
#turbine 元素不是完全正方形，如您在此屏幕截图中所见：
如果您可以在 illustrator 中旋转您的 svg，使其起始位置的宽度与高度相同，那么您就有了一个完美的旋转风力涡轮机。
由于涡轮的连接点不在它的中心 canvas 你需要手动调整 transform-origin:
有了这些坐标
svg #turbine {
animation: rotate 3s linear infinite;
transform-origin: 51% 35%;
}
涡轮会正常旋转
调整变换原点：
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>