【发布时间】：2018-10-09 13:11:43
【问题描述】：
我尝试制作一个简单的 svg-windmill-animation。
我在我的代码中添加了一个不可见的矩形，并用应该旋转的元素组成了一个组。现在我“只是”希望矩形（以及组内的元素）围绕矩形中心点旋转。这不是原始文件只是一个示例。原版更详细，还有很多其他元素，所以我不能只在它们周围放一个 div。
有人可以帮助我吗？
body {
width: 100%;
font-size: 20px;
background-color: #eee;
}
.wrapper {
margin: 0 auto;
text-align: center;
max-width: 700px;
}
.bild{
width: 100%;
height: 0;
padding-top: 100%;
position: relative;
}
svg{
position: absolute;
height: 100%;
width: 100%;
left:0;
top:0;
}
#rect-group {
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
-moz-transform-origin: 40% 30%;
-webkit-transform-origin: 40% 30%;
transform-origin: 40% 30%;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}<body>
<div class="wrapper">
<div class="bild">
<svg version="1.1" id="windmill" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1993px" height="1715.222px" viewBox="0 0 1993 1715.222" enable-background="new 0 0 1993 1715.222" xml:space="preserve">
<polygon id="unimportant" fill="#FFFFFF" stroke="#141412" stroke-width="6" stroke-miterlimit="10" points="1003.907,592.597
940.944,1396.301 1052.056,1396.301 "/>
<line id="ground" fill="none" stroke="#141412" stroke-width="6" stroke-miterlimit="10" x1="0" y1="1396.301" x2="1993" y2="1396.301"/>
<g id="rect-group">
<path fill="#FFFFFF" stroke="#141412" stroke-width="6" stroke-miterlimit="10" d="M988.302,570.632
c0,0-96.758-361.043-46.624-489.786c0,0,62.151,9.922,67.122,489.488c0,0,1.351,24.071-2.635,25.129
C1002.18,596.522,994.566,595.248,988.302,570.632z"/>
<path fill="#FFFFFF" stroke="#141412" stroke-width="6" stroke-miterlimit="10" d="M994.134,622.678
c0,0-204.354,312.975-333.699,361.537c0,0-34.08-52.912,319.8-376.605c0,0,17.028-17.068,20.475-14.806
C1004.158,595.067,1008.288,601.587,994.134,622.678z"/>
<path fill="#FFFFFF" stroke="#141412" stroke-width="6" stroke-miterlimit="10" d="M1027.08,599.72
c0,0,335.813,164.144,399.977,286.501c0,0-48.299,40.353-413.214-270.848c0,0-19.04-14.79-17.221-18.49
C998.442,593.182,1004.403,588.279,1027.08,599.72z"/>
<rect x="476.943" y="66.222" fill="none" width="1058" height="1058"/>
</g>
<circle id="circle" fill="#FFFFFF" stroke="#141412" stroke-width="6" stroke-miterlimit="10" cx="1004.056" cy="596.222" r="31.588"/>
</svg>
</div>
</div>
</body>【问题讨论】：
-
试试
transform-origin: 50% 35%;，我猜它有效 -
谢谢！这似乎有效。但是您是如何找到这些值的呢？这只是一个例子，我对其他动画也有同样的问题
-
我尝试使用
transform-origin: center，但它失败了，然后我只是尝试提供与您的实现接近的数字:) 我知道这是一个坏主意，但它奏效了 :)