CSS背景SVG动画在Opera中的奇怪行为

Question

我在不同的浏览器中都有CSS背景SVG动画的行为问题。它曾经在几个月前（包括Opera）完美运行，但现在在Opera中表现异常。它似乎可以在其他浏览器中使用。

如何解决？

---

OPERA：

您可以看到微调框正在跳到左上角。

----------------------------------

其他浏览器：

---

代码：

#spinner{
    width:200px;
    height:200px;
    background-color:#343a40;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg id='a' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E%23a%7Banimation:faspin 2s infinite linear%7D%40keyframes faspin%7B0%25%7Btransform%3Arotate%280deg%29%7D100%25%7Btransform%3Arotate%28360deg%29%7D%7D%3C/style%3E%3Cpath fill='%23fff' d='M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:80%;
    background-position:50%;
}

<div id="spinner"></div>

动画的HTML版本

/*DEMO PURPOSE*/
body{background:#343a40}
svg{width:100px;height:100px}

<svg id='a' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
    <style>
        #a{animation:faspin 2s infinite linear}
        @keyframes faspin{
            0%{transform:rotate(0deg)}
            100%{transform:rotate(360deg)}
        }
    </style>
    <path fill='#fff' d='M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z'/>
</svg>

Answer 1

我没有对svg #a进行动画处理，而是对路径进行了动画处理。为了使其正常工作，我使用了path{animation:faspin 2s infinite linear;transform-box: fill-box;transform-origin: 50% 50%;}

#spinner{
    width:200px;
    height:200px;
    background-color:#343a40;
    background-image: url("data:image/svg+xml,%3Csvg id='a' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E path%7Banimation:faspin 2s infinite linear;transform-box: fill-box;transform-origin: 50%25 50%25;%7D @keyframes faspin%7B 25%25%7Btransform:rotate(80deg)%7D 100%25%7Btransform:rotate(360deg)%7D %7D %3C/style%3E%3Cpath fill='white' d='M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:80%;
    background-position:50%;
}

<div id="spinner"></div>

您用于背景的SVG现在看起来像这样：

body{background:black}

svg{width:90vh}

<svg id='a' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
  <style>
    path{animation:faspin 2s infinite linear;transform-box: fill-box;transform-origin: 50% 50%;}
    @keyframes faspin{
      25%{transform:rotate(80deg)}
      100%{transform:rotate(360deg)}
    }
    </style><path fill='white' d='M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z'/></svg>

希望对您有帮助。