SVG 旋转动画在 IE 和 FF 中失败

Question

我正在使用 SVG 制作一个简单的加载微调器元素。它在 Chrome 中运行良好，但在其他浏览器中却不行。在 IE 中，动画根本不起作用。更麻烦的是，在 FF 中，动画可以工作，但旋转的中心位置不正确。

我该怎么做才能让它在 FF 中正确旋转？ （编辑：它实际上在 FF 42alpha 中正常工作。）我能做些什么让它在 IE 中工作吗？ （针对这些浏览器的当前版本）

下面的sn-p包含相关的CSS和HTML：

svg.spinner {
  display: block;
  width: 50px;
}
svg.spinner path {
  fill-opacity: 0;
  stroke-width: 11;
}
svg.spinner path.track {
  stroke: rgba(92, 112, 128, 0.2);
}
svg.spinner path.head {
  stroke: rgba(92, 112, 128, 0.5);
  stroke-linecap: round;
  /* -webkit-transform-origin: 50px 50px; */
  -ms-transform-origin: 50px 50px;
  transform-origin: 50px 50px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<svg class="spinner" viewBox="0 0 100 100">
  <path class="track" d="M 50,50 m 0,-44.5 a 44.5,44.5 0 1 1 0,89 a 44.5,44.5 0 1 1 0,-89"></path>
  <path class="head" d="M 91.81632162497291 65.21989637799226 A 44.5 44.5 0 0 0 50 5.5"></path>
</svg>

Answer 1

较新版本的 FF 可以更恰当地处理此问题。 Firefox 41 及更高版本添加了对transform-origin with regards to SVG elements 的适当支持。它还添加了transform-box 属性。您可以将其设置为view-box，它将使用 SVG 视图框作为参考并正确计算变换原点。 FF 40 和更早的版本似乎默认计算变换原点相对于相关路径元素的位置，并且不支持任何方式来改变它。

未来的好消息！但是，这无助于在当前版本的 FF 或 IE 上运行。

Answer 2

从@JKillian 的回答看来，似乎没有办法为旧版浏览器修复它。
还有另一种动画元素的方法。 :D
我画圈。没有填充只有描边。
并对笔画进行动画处理以获得所需的效果。

svg.spinner {
  display: block;
  width: 150px;
}
.circ {
  fill: none;
  stroke: #222;
  stroke-width: 10;
}
#circ2 {
  stroke: #999;
  stroke-dasharray: 160, 100;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2s;
}
svg:hover #circ2 {
  stroke-dashoffset: 500;
}

<svg class="spinner" viewBox="0 0 100 100">
  <circle class="circ" id="circ1" cx="50" cy="50" r="41" />
  <circle class="circ" id="circ2" cx="50" cy="50" r="41" />
</svg>

Answer 3

此答案适用于 Firefox 40、Firefox 42 和 Chrome。

svg.spinner {
  display: block;
  width: 50px;
}
svg.spinner path {
  fill-opacity: 0;
  stroke-width: 11;
}
svg.spinner path.track {
  stroke: rgba(92, 112, 128, 0.2);
}
svg.spinner path.head {
  stroke: rgba(92, 112, 128, 0.5);
  stroke-linecap: round;
  -ms-transform-origin: 50px 50px;
  transform-origin: 50px 50px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<svg class="spinner" viewBox="-50 -50 100 100">
  <g transform="translate(-50, -50)" >
  <path class="track" d="M 50,50 m 0,-44.5 a 44.5,44.5 0 1 1 0,89 a 44.5,44.5 0 1 1 0,-89"></path>
  <path class="head" d="M 91.81632162497291 65.21989637799226 A 44.5 44.5 0 0 0 50 5.5"></path>
  </g>
</svg>