SVG中的CSS3旋转:火狐忽略原点

Question

我正在使用的SVG输出。这是一个相当大的规模，但我已经把问题带到了一个JSFiddle。

这是演示

​

.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中设置的起源，要么因为它自己预测的起源而疯狂。

不太清楚如何准确地修复这个问题，因为我的SVG有许多需要旋转的元素。

有人有什么想法吗？

另外，我也不知道其他人的情况，但是当我在MS中看到这一点时，旋转是不会发生的。因此，我很高兴知道它是否对任何启用边缘的用户都有效。

Answer 1

扩展罗伯特的评论(我承认这对我来说是新的)。来自转换草案规范：

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

这意味着SVG元素的转换起源并不是相对于每个元素的边界框计算的(如常规的HTML /CSS)。您可能需要一个javascript解决方案。