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

Posted 2023-03-06

【中文标题】SVG 旋转动画在 IE 和 FF 中失败

【英文标题】：SVG Rotation Animation Failing in IE and FF

【发布时间】：2015-12-08 10:44:33

【问题描述】：

我正在使用 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>

【问题讨论】：

FF 对transform-origin 的解释与 Chrome 不同。我相信 FF 使用 SVG 的 0.0 点，而 Chrome 使用 SVG 的中心。这就是创建 Snap.svg 和 Greensock 等库的原因。搜索左侧的相关问题 --> 可能会为您找到一些东西。

我认为这个很重要，以防我的信息不正确或过时 - ***.com/questions/24203492/…

正要链接到同一个问题，@Paulie_D！ ;) Looks like 它还没有为 IE 打补丁。

@Paulie_D @jaunt 我没有在transform-origin 中使用百分比，我使用的是像素。

【参考方案1】：

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

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

【讨论】：

这在 FF 中默认是关闭的，所以你必须自己打开支持。

【参考方案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>

【讨论】：

这实际上可以用来获得完整的工作解决方案吗？不管怎样，我喜欢它......它很聪明

@JKillian 如果您只是设置关键帧动画，然后使用从 0 到 500 的 stroke-dashoffset；你会有一个可行的解决方案。如果您将鼠标悬停，您可以看到它是一个有效的解决方案。

【参考方案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>

【讨论】：

谢谢，这是一个很好的解决方案。您能否详细说明为什么 translate(-50, -50) 修复了 FF40 中的问题，并且没有在 FF42/Chrome 中搞砸？

它基本上使它绕原点旋转。

啊，我没注意到你也修改了viewbox