Question

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

如何在FF中正确旋转？（编辑：它实际上在FF 42alpha中正常工作。）我有什么办法让它在IE中工作吗？（定位这些浏览器的当前版本）

下面的代码段包含相关的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
我画圈。没有填充仅中风并设置动画以获得理想的效果。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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>

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

3 个答案: