Opera中的CSS背景SVG动画奇怪行为-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

487683

文章

249181231

访问

+关注

分类

暂无分类

日期归档

暂无数据

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

发布于2022-11-01 23:24 阅读(1202) 评论(0) 点赞(26) 收藏(3)

我对不同浏览器中 CSS 背景 SVG 动画的行为有疑问。几个月前它曾经完美地工作（包括 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>

展开片段

解决方案

我没有为 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>