在 CSS 中设置旋转点和中心动画

Question

CSS-动画有问题：

.windmill {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    transform-origin: center center;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-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); } }

                            <svg viewBox="0 0 60 55" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                                <g id="base"">
                                    <polyline id="body" fill="black" points="15.039,30.666 15.383,14 16.639,14 16.98,30.666"/>
                                </g>
                                    <g class="windmill">
                                        <polyline id="wing_x5F_top" fill="black" points="15.811,0.213 15.161,10.06 15.452,12.378 16.208,12.382 16.839,10.034 16.143,0.215"/>
                                        <polyline id="wing_x5F_left" fill="black" points="27.41,19.574 19.182,14.129 17.023,13.232 16.646,13.886 18.372,15.598 27.244,19.861"/>
                                        <polyline id="wing_x5F_right" fill="black" points="4.645,19.402 12.873,13.957 15.031,13.06 15.409,13.714 13.683,15.426 4.811,19.689"/>
                                        <circle id="motor" fill="#333333" stroke="#E6E6E6" stroke-width="0.25" stroke-miterlimit="10" cx="15.976" cy="13.232" r="1.15"/>
                                    </g>
                                </svg>

请帮助我，我需要将动画居中并确保它不是双重旋转.. 谢谢！

Answer 1

不同浏览器对 SVG 转换的支持大不相同。 IE 和 Opera 根本不支持它们。 Firefox 有，但没有相对价值（就像你的情况）。

所以现在你有三个选择：

第一种方法是将图形更改为 .jpg，然后一切都应该可以正常工作。但是您可能有一些很好的理由不这样做，所以这里有其他解决方案：
如果您想坚持使用 .svg，您可以直接在 .svg 文件中构建动画（这样就不必使用 CSS 制作动画）。应该不难，因为网上有很多教程。
最后一个解决方案是使用 JavaScript。请参阅 this article，其中对整个问题的解释非常好。本文使用GSAP库，解决方案代码如下：
```
TweenMax.to("#svg, #div", 2, {
    rotation:360, 
    transformOrigin:"50% 50%"
});
```

所以结论是：用纯 CSS 做这件事可能是不可能的。即使你让它在你的浏览器中工作，其他人也可能无法正确显示它。

Answer 2

浏览器似乎确实错误计算了宽度和高度。虽然我认为 JavaScript 是可选的，但它通常会有不支持硬件加速的缺点。这在提高转速时非常明显。 jpg 版本可能很难实现，因为缺少透明度、定位、响应能力丧失...

我找到了一个解决方法，即向正在设置动画的组添加具有转子叶片大小的隐藏圆。

.windmill {
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    -webkit-animation: clockwise 1s infinite linear;
    -moz-animation: clockwise 1s infinite linear;
    animation: clockwise 1s infinite linear;
}
@-moz-keyframes clockwise {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}
@keyframes clockwise {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

<svg viewBox="0 0 40 55" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <polyline id="body " points="15.039,30.666 15.383,14 16.639,14 16.98,30.666 " transform="matrix(1.2953083,0,0,1.2953083,-4.694094,-0.881751)" style="fill:#000000" />
    <g class="windmill">
        <circle r="16" cy="16" cx="16" id="ellipse4307" style="fill:#000000;fill-opacity:0;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none" />
        <path style="fill:#ae0000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none" d="m 15.99036,0.001184 a 16,16.11449 0 0 0 -0.293467,0.0101 l -0.341537,12.264949 0.635004,3.923873 -0.0026,0.04048 0.0051,-0.01771 0.0026,-0.02025 0.637535,-3.923873 -0.344066,-12.26242 a 16,16.11449 0 0 0 -0.28841,-0.01518 l -0.0051,0 -0.0051,0 z m -0.0026,16.239421 -0.01771,0.0101 -3.653175,1.399035 -10.2132018,6.413292 a 16,16.11449 0 0 0 0.298528,0.523689 l 10.5522088,-5.808647 3.01817,-2.519779 0.02025,-0.01269 -0.0026,-0.0026 0.0051,-0.005 0.0076,-0.0076 -0.01518,0.0101 z m 0.0051,0.0051 0.03289,0.02025 3.01817,2.52231 10.542089,5.801057 a 16,16.11449 0 0 0 0.313706,-0.516098 l -10.218303,-6.413293 -3.650643,-1.401564 -0.02782,-0.02025 -0.0026,0.0026 0.0101,0.01269 -0.01518,-0.0101 -0.0026,0.0026 z" id="path4286" inkscape:connector-curvature="0" />
    </g>
    <circle style="fill:#333333;stroke:#e6e6e6;stroke-width:1.29530823;stroke-miterlimit:10" r="1.4896045" cy="16.114491" cx="16" stroke-miterlimit="10 " id="motor " />
</svg>

在 CSS 中设置旋转点和中心动画

Setting rotation point and center animation in CSS

html

css

animation

rotation