Question

我尝试制作一个简单的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>

Answer 1

使用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旋转动画（转换原点）

1 个答案: