SVG中的CSS3旋转：Firefox忽略原点[重复]

Question

我正在使用 Adob​​e Illustrator 的 SVG 输出。它的规模相当大，但我已将问题带到了 JSFiddle 中。

这里是Demo

.cls-3, .cls-4{
  fill: none;
}

.cls-12, .cls-4 {
  stroke: #85bce6;
}
.cls-4 {
  stroke-width: 17.8918px;
}

.spin {
  animation-duration: 5.0s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  display: inline-block;
}

.spin.right {
  animation-name: spin-right;
}
.spin.fastest {
  animation-duration: 2.0s;
}

@keyframes spin-right {
  0%   { 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
  }
  100% { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    transform: rotate(360deg); 
  }
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="300 100 900 600">
  <g>
    <g class="spin right fastest">
      <circle class="cls-3" cx="763.662" cy="401.0772" r="287.6463" transform="translate(-63.9564 644.1622) rotate(-44.0769)"/>
      <path class="cls-4" d="M997.0074,232.74a286.59,286.59,0,0,1,52.6308,199.8731c-17.44,157.9025-159.5825,271.77-317.485,254.3307a287.6266,287.6266,0,0,1-254.33-317.4848"/>
    </g>
  </g>
</svg>

这里的问题是旋转在支持 Blink 和 WebKit 的浏览器中看起来和工作得很好。但是当谈到 Mozilla 时，它似乎要么忽略了我在 css 中设置的 Origin，要么对自己的预测起源发疯了。

不太清楚如何准确修复这个问题，因为我的 SVG 有很多元素需要旋转成各种大小。

有人有什么想法吗？

---

另外，我不知道其他任何人，但是当我在 MS Edge 中看到这个时，旋转不会发生。所以我很高兴知道它是否适用于任何支持 Edge 的用户。

Answer 1

扩展罗伯特的评论（我承认这对我来说是新的。）来自transforms draft spec：

对于没有关联 CSS 布局框的 SVG 元素，水平和垂直偏移量表示距元素局部坐标空间原点的偏移量。

这意味着 SVG 元素的变换原点不是相对于每个元素的边界框计算的（就像在常规 HTML DOM/CSS 中一样）。您可能需要一个 javascript 解决方案。