svg旋转动画（转换原点） [英] svg rotate-animation (transform-origin)
本文介绍了svg旋转动画（转换原点）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试制作一个简单的svg-windmill-animation。
I try to make a simple svg-windmill-animation.
我在代码中添加了一个不可见的矩形，并用应旋转的元素组成了一个组。现在，我只是希望矩形（以及组内的元素）围绕矩形中心点旋转。这不是原始文件，只是一个例子。原始内容更加详细，还包含许多其他元素，因此因此我不能仅在它们周围放置一个div 。
I added an invisible rectangle to my code an made a group with the elements which should be rotated. Now I "just" want that the rectangle (and the elements inside the group) rotate around the rectangle center point. This is not the original file it's just an example. The original is much more detailed an with a lot of other elements, so I am not able to just put a div around them.
有人可以帮助我吗？
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-box：fill-box; ，您只需执行 transform-origin：center;
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 {
animation:spin 4s linear infinite;
transform-origin: center;
transform-box:fill-box;
}
@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>
这篇关于svg旋转动画（转换原点）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
