CSS：SVG旋转动画失败

我试图从它的中心旋转刀片，就像风车一样，我是CSS新手，我无法使它正常旋转，刀片从屏幕消失。实际上，它在某些浏览器中无法正常工作，例如在PC上使用firefox，但它适用于所有浏览器中的OSx Safari。我已经粘贴了以下SVG，但这里是我的代码完成：http://codepen.io/DavidKartF1/pen/mVKwpX CSS：SVG旋转动画失败

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

来源

2016-01-30 DavidLop

的问题与发现转子与transform-origin中心，以及如何当转子周围绘制48.327% 62.24%应解释坐标〜（50,1000），然后通过悬挂952px其父母<g>。你可以阅读有关SVG坐标系统以及它如何影响transform这儿：

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

一个解决问题的方法，在这两种火狐至少工作和Chrome是使用像素值，而不是百分比：

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

更新笔（请注意，我已经删除了转子的style属性和感动一切CSS）：http://codepen.io/Sphinxxxx/pen/adKVqZ

来源

2016-01-30 17:56:58 Sphinxxx

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

来源

2016-01-30 12:17:38

CSS：SVG旋转动画失败

回答

相关问题