SVG旋转动画在IE和FF中失败 [英] SVG Rotation Animation Failing in IE and FF

问题描述

我正在使用SVG制作一个简单的加载旋转器元素。它的工作原理在Chrome，但不是在其他浏览器。在IE中，动画根本不工作。更烦恼，在FF，动画作品，但旋转不在正确的位置的中心。

我能做什么，使它在FF正确旋转？ （编辑：它实际上在FF 42alpha正确工作。）有什么我可以做，以使它工作在IE吗？ （定位这些浏览器的当前版本）

下面的代码段包含相关的CSS和HTML：

div class =snippetdata-lang =jsdata-hide =false>

  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， stroke-linecap：round; / * -webkit-transform-origin：50px 50px; * / -ms-transform-origin：50px 50px; transform-origin：50px 50px; -webkit-animation：spin 2s线性无限;动画：自旋2s线性无限;} @  -  webkit-keyframes spin {from {-webkit-transform：rotate（0deg）; transform：rotate（0deg）; }到{-webkit-transform：rotate（360deg）; transform：rotate（360deg）; }} @ keyframes spin {from {-webkit-transform：rotate（0deg）; transform：rotate（0deg）; }到{-webkit-transform：rotate（360deg）; transform：rotate（360deg）; }}  

 < svg class =spinnerviewBox = 0 0 100 100> < path class =trackd =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 =headd =M 91.81632162497291 65.21989637799226 A 44.5 44.5 0 0 0 50 5.5>< / path>< / svg>  

/ div>

解决方案

此解答适用于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， stroke-linecap：round; -ms-transform-origin：50px 50px; transform-origin：50px 50px; -webkit-animation：spin 2s线性无限;动画：自旋2s线性无限;} @  -  webkit-keyframes spin {from {-webkit-transform：rotate（0deg）; transform：rotate（0deg）; }到{-webkit-transform：rotate（360deg）; transform：rotate（360deg）; }} @ keyframes spin {from {-webkit-transform：rotate（0deg）; transform：rotate（0deg）; }到{-webkit-transform：rotate（360deg）; transform：rotate（360deg）; }}  

 < svg class =spinnerviewBox = -50 -50 100 100> < g transform =translate（-50，-50）> < path class =trackd =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 =headd =M 91.81632162497291 65.21989637799226 A 44.5 44.5 0 0 0 50 5.5>< / path> < / g>< / svg>  

I'm working on making a simple loading spinner element with SVG. It works excellently in Chrome, but not in other browsers. In IE, the animation doesn't work at all. More troubling, in FF, the animation works but the rotation is not centered at the right location.

What can I do to make it rotate correctly in FF? (Edit: It actually works correctly in FF 42alpha.) Is there anything I can do to get it to work in IE? (Targeting the current version of these browsers)

The snippet below contains the relevant CSS and 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>

解决方案

This answer works on Firefox 40, Firefox 42 and 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>

这篇关于SVG旋转动画在IE和FF中失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！