svg rotate-animation (transform-origin)

问题

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>

回答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>

来源：https://stackoverflow.com/questions/52721937/svg-rotate-animation-transform-origin

标签

html

css

animation