CSS背景SVG动画在Opera中的奇怪行为
[英]CSS background SVG animation strange behavior in Opera
问题描述
I have a problem with behavior of CSS background SVG animation in different browsers. 
我在不同的浏览器中都有CSS背景SVG动画的行为问题。 It used to work perfectly few months ago (including Opera) but now it behaves strangely in Opera. 它曾经在几个月前（包括Opera）完美运行，但现在在Opera中表现异常。 It appears to work in other browsers. 它似乎可以在其他浏览器中使用。
How to fix it? 如何解决？
OPERA: 歌剧：
As you can see the spinner is jumping to the upper left corner. 如您所见，微调框正在跳到左上角。
---------------------------------- ----------------------------------
OTHER BROWSERS: 其它浏览器：
CODE: 码：
#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 version of animation 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>
1 个解决方案
解决方案1
2 已采纳 2019-05-04 22:40:21
Instead of animating the svg #a I'm animating the path. 我不是在动画svg #a，而是在动画路径。 In order to make it work I'm using path{animation:faspin 2s infinite linear;transform-box: fill-box;transform-origin: 50% 50%;} 为了使其正常工作，我使用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>
The SVG you are using for the background is now looking like this: 您用于背景的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>
I hope it helps. 希望对您有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Safari / Opera中奇怪的按钮行为 - Strange button behavior in safari/opera
CSS SVG背景-周围有奇怪的透明线 - css SVG background - strange transparent line around
奇怪的SVG悬停行为 - Strange SVG hover behavior
CSS文件中样式为行内SVG文本的填充属性具有奇怪的行为 - Strange behavior with fill attribute for inline SVG text styled in CSS file
Opera上奇怪的CSS边框问题 - Strange CSS border issue on Opera
Css animation 在动画两个 SVG 属性时有奇怪的延迟 - Css animation has strange delay when animating two SVG properties
奇怪的jQuery动画行为 - Strange jquery animation behavior
在悬停时更改 css 背景图像 svg 绘制行为？ - change css background-image svg paint behavior on hover?
当定位一个 SVG 层时，使用 css 动画折叠 SVG 信封的行为很奇怪 - Folding SVG envelope with css animation behaves strange when targeting one SVG layer
CSS奇怪的悬停行为 - CSS Strange hover behavior
相关标签