CSS: SVG 旋转动画失败

Question

我正试图从中心旋转叶片，就像风车一样，我是 CSS 的新手，但我无法使其正常旋转，叶片从屏幕上消失了。实际上它在某些浏览器中不起作用，例如在 pc 的 firefox 中，但它在每个 Ios 浏览器中的 OSx 和 safari 上工作。我在下面粘贴了 SVG，但这是我的完整代码：http://codepen.io/DavidKartF1/pen/mVKwpX

<svg
class="windmill-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
>

<g transform="translate(0,-952.36217)">
    <g id="rotor" style="transform-origin: 48.327% 62.24%; transform: rotate(0deg);">
        <path style="" d="m 52.032964,981.03514 c -1.255809,0.0277 -2.456062,0.72451 -3.071613,1.91975 -0.895349,1.73855 -0.212098,3.8744 1.526442,4.76975 1.738541,0.89534 3.874394,0.21209 4.769741,-1.52645 0.895349,-1.73854 0.212099,-3.87439 -1.526442,-4.76974 -0.543294,-0.27979 -1.127305,-0.40591 -1.698128,-0.39331 z" fill="#000000" fill-opacity="1" fill-rule="evenodd" stroke="none" />
        <path style="" d="m 56.334032,984.98211 c -0.04983,0.52212 -0.197859,1.04165 -0.452665,1.53642 -0.235879,0.45802 -0.543385,0.85701 -0.902025,1.18618 1.155573,1.33508 3.100732,3.52774 3.660967,3.81626 0.776522,0.39991 11.183654,3.80654 14.660386,4.60925 2.124798,0.49057 7.324796,1.52986 7.794423,0.51214 0.07685,-0.16654 0.02896,-0.38934 -0.181727,-0.67735 -0.588843,-0.80495 -5.351732,-3.30398 -5.65996,-3.46272 -11.276895,-5.95922 -16.673816,-7.27268 -18.919399,-7.52018 z" fill="#000000" fill-opacity="1" fill-rule="evenodd" stroke="none" />
        <path style="" d="m 48.100161,953.54009 c -0.182674,0.0167 -0.35154,0.17246 -0.495619,0.49892 -0.402687,0.91243 -0.188457,6.28177 -0.171813,6.62807 0.470537,12.55703 1.99393,17.91869 2.907627,20.05272 0.955097,-0.43748 2.060996,-0.51848 3.10257,-0.17182 0.580003,-1.67633 1.476988,-4.37943 1.447205,-4.99913 -0.04193,-0.87245 -2.290657,-11.59173 -3.333859,-15.00402 -0.637549,-2.08542 -2.339769,-7.10702 -3.456111,-7.00474 z" fill="#000000" fill-opacity="1" fill-rule="evenodd" stroke="none" />
        <path style="" d="m 47.908522,985.18366 c -1.716128,0.32806 -4.713996,0.93611 -5.256858,1.28531 -0.734592,0.47253 -8.892997,7.78187 -11.326528,10.39146 -1.730618,1.85582 -6.183724,6.94777 -3.660966,6.67437 0.991531,-0.1075 5.536887,-2.9778 5.828469,-3.1654 10.611197,-6.66826 14.501935,-10.66451 15.902737,-12.52922 -0.819752,-0.68079 -1.33845,-1.63622 -1.486854,-2.65652 z" fill="#000000" fill-opacity="1" fill-rule="evenodd" stroke="none" />
    </g>
    <g id="stick">
        <path style="" d="m 50.751702,993.03361 2.605442,0 1.172837,58.64579 -5.286594,0 z" fill="#000000" fill-opacity="1" fill-rule="evenodd" stroke="none" />
        <path style="" d="m 50.755774,988.66999 0,2.99716 2.642451,0 0,-2.98178 c -0.851509,0.19175 -1.762006,0.19601 -2.642451,-0.0154 z" fill="#000000" fill-opacity="1" fill-rule="evenodd" stroke="none" />
        <path style="" d="m 50.102459,991.89764 c -0.07744,0 -0.138774,0.1601 -0.138774,0.35684 l 0,0.19164 c 0,0.19675 0.06134,0.35685 0.138774,0.35685 l 3.951729,0 c 0.07743,0 0.138773,-0.1601 0.138773,-0.35685 l 0,-0.19164 c 0,-0.19674 -0.06134,-0.35684 -0.138773,-0.35684 l -3.951729,0 z m 3.9286,0.0463 0.0099,0 c 0.0022,0 0.07599,0.14429 0.07599,0.3205 l 0,0.17181 c 0,0.1762 -0.07053,0.3172 -0.07269,0.3172 l -0.01322,0 c 0.01737,-0.075 0.03635,-0.17784 0.03635,-0.29077 l 0,-0.22798 c 0,-0.11431 -0.01817,-0.21549 -0.03635,-0.29076 z" fill="#000000" fill-opacity="1" fill-rule="evenodd" stroke="none" />
    </g>
</g>

Answer 1

阅读该指南 >> SVG animation。几个月前它帮助了我 :)。基本上，最好从元素内部设置动画，然后从 css.

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="10" y="10" height="110" width="110"
         style="stroke:#ff0000; fill: #0000ff">

        <animateTransform
            attributeName="transform"
            begin="0s"
            dur="20s"
            type="rotate"
            from="0 60 60"
            to="360 60 60"
            repeatCount="indefinite"
        />
    </rect>

</svg>

Answer 2

问题与使用 transform-origin 找到转子的中心有关，以及当围绕坐标 ~(50,1000) 绘制转子然后将其提升 952px 时应如何解释 48.327% 62.24% parent<g>。您可以在此处阅读有关 SVG 坐标系及其如何影响 transforms 的信息：

https://sarasoueidan.com/blog/svg-transformations/

至少在 Firefox 和 Chrome 中都有效的解决问题的方法是使用像素值而不是百分比：

.windmill-icon #rotor {
    transform-origin: 52px 985px;
    ...
}

更新笔（请注意，我删除了转子的 style 属性并将所有内容移至 CSS）：http://codepen.io/Sphinxxxx/pen/adKVqZ

CSS: SVG 旋转动画失败

CSS: SVG rotation animation fail

html

css

svg

svg-animate