0

I try to make a simple svg-windmill-animation.

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.

Can someone help me? 

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>
jessy20
  • 57
  • 6
  • try the `transform-origin: 50% 35%;` , It works I guess – chintuyadavsara Oct 09 '18 at 13:47
  • Thank you! This seems to work. But how did you find these values? This is just an example and i have the same problem with other animations too – jessy20 Oct 09 '18 at 14:03
  • I tried to have `transform-origin: center`, it failed then I just tried giving numbers which are close to your implementation :) I know it is a bad Idea, but it worked :) – chintuyadavsara Oct 09 '18 at 14:06

1 Answers1

1

Use transform-box: fill-box; then you can simply do 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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415