Edge 中的 CSS 转换未按预期工作

Question

我有一个无人机的 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>

Answer 1

问题在于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>

Answer 2

您的边缘浏览器是什么版本？变换原点should be supported

解决此问题的另一种方法可能是使用cssSandpaper