我有一个无人机的svg插图,我希望螺旋桨旋转。该动画在Chrome和Firefox中运行正常,但在Edge中,旋转中心很奇怪。它可能与transform-origin: center
属性有关,但是我不知道如何纠正它,因为它确实可以在Firefox / Chrome中使用。
.drone .body {
fill: #000000;
}
.drone .wing {
fill: #000000;
animation: wing 5s linear forwards infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes wing {
100% {
transform: rotateY(7200deg);
}
}
<svg id="drone1" class="drone" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
<g id="drone1-droneContainer">
<g class="wing left">
<path d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
<path d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
</g>
<g class="wing right">
<path d="M48,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S48.6,2,48,2z"/>
<path d="M43,2c-0.6,0-8-0.4-8-1s7.4-1,8-1s1,0.4,1,1S43.6,2,43,2z"/>
</g>
<g class="body">
<path d="M45,0.5C45,0.2,45.2,0,45.5,0S46,0.2,46,0.5V4c0.6,0,1,0.4,1,1v1h0.5C48.3,6,49,6.7,49,7.5S48.3,9,47.5,9H37v0.9
c0,0.7-0.4,1.4-1,1.7l-3.6,2.1c-0.3,0.2-0.7,0.3-1,0.3h-6.9c-0.4,0-0.7-0.1-1-0.3L20,11.6c-0.6-0.4-1-1-1-1.7V9H8.5
C7.7,9,7,8.3,7,7.5S7.7,6,8.5,6H9V5c0-0.6,0.4-1,1-1V0.5C10,0.2,10.2,0,10.5,0C10.8,0,11,0.2,11,0.5V4c0.6,0,1,0.4,1,1v1h7l0,0
c0.1-0.6,0.4-1.2,1-1.6l3.6-2.1c0.3-0.2,0.7-0.3,1-0.3h6.9c0.4,0,0.7,0.1,1,0.3L36,4.4C36.6,4.8,37,5.3,37,6l7,0V5
c0-0.6,0.4-1,1-1V0.5z"/>
</g>
</g>
</svg>
问题出在transform-box
。这是一个实验性CSS属性,Microsoft Edge not supported。
我没有在Microsoft Edge上找到transform-box
的解决方法,所以我只能给您一个建议,如下所示在Microsoft Edge上用gif picture替换svg:
.drone .body { fill: #000000; } .drone .wing { fill: #000000; animation: wing 5s linear forwards infinite; transform-box: fill-box; transform-origin: center; } @keyframes wing { 100% { transform: rotateY(7200deg); } } @supports (-ms-ime-align: auto) { /* Edge 12+ CSS styles go here */ #pic { display: block; } #drone1 { display: none; } } @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { /* Chrome 29+ CSS styles go here */ #pic { display: none; } #drone1 { display: block; } }
<img id="pic" src="https://i.stack.imgur.com/9yOqm.gif" /> <svg id="drone1" class="drone" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet"> <g id="drone1-droneContainer"> <g class="wing left"> <path d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z" /> <path d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z" /> </g> <g class="wing right"> <path d="M48,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S48.6,2,48,2z" /> <path d="M43,2c-0.6,0-8-0.4-8-1s7.4-1,8-1s1,0.4,1,1S43.6,2,43,2z" /> </g> <g class="body"> <path d="M45,0.5C45,0.2,45.2,0,45.5,0S46,0.2,46,0.5V4c0.6,0,1,0.4,1,1v1h0.5C48.3,6,49,6.7,49,7.5S48.3,9,47.5,9H37v0.9 c0,0.7-0.4,1.4-1,1.7l-3.6,2.1c-0.3,0.2-0.7,0.3-1,0.3h-6.9c-0.4,0-0.7-0.1-1-0.3L20,11.6c-0.6-0.4-1-1-1-1.7V9H8.5 C7.7,9,7,8.3,7,7.5S7.7,6,8.5,6H9V5c0-0.6,0.4-1,1-1V0.5C10,0.2,10.2,0,10.5,0C10.8,0,11,0.2,11,0.5V4c0.6,0,1,0.4,1,1v1h7l0,0 c0.1-0.6,0.4-1.2,1-1.6l3.6-2.1c0.3-0.2,0.7-0.3,1-0.3h6.9c0.4,0,0.7,0.1,1,0.3L36,4.4C36.6,4.8,37,5.3,37,6l7,0V5 c0-0.6,0.4-1,1-1V0.5z" /> </g> </g> </svg>
您的边缘浏览器是什么版本?转换原点should be supported