代码之家 › 专栏 › 技术社区 › JRX

CSS:SVG旋转动画失败

svg-animate svg css html

JRX · 技术社区 · 9 年前

我试图从它的中心旋转叶片,就像风车一样,我是CSS的新手,我无法使它正常旋转,叶片从屏幕上消失。实际上,它在某些浏览器中不起作用,例如在firefox for pc中,但在safari for OSx和所有Ios浏览器中都起作用。我已经在下面粘贴了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>

2 回复 | 直到 9 年前

Sphinxxx 9 年前

问题与找到转子中心有关 transform-origin ,以及如何 48.327% 62.24% 当转子围绕坐标~(501000)绘制,然后由其父级提升952px时,应进行解释 <g> 。您可以阅读SVG坐标系及其影响 transform 在这里:

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

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

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

更新的笔(请注意,我已拆下转子 style 属性并将所有内容移动到CSS): http://codepen.io/Sphinxxxx/pen/adKVqZ

user3470625 user3470625 9 年前

阅读该指南>> 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>