Question

我使用Adobe 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解决方案。

SVG中的CSS3旋转：Firefox忽略原点

1 个答案: