时间戳

首页 > 解决方案 > Background image SVG animation stopped working on chrome

javascript - Background image SVG animation stopped working on chrome

问题描述

Not sure when or how, but the loading svg animation i was using is no longer working on Chrome (still works on safari and firefox for example).

Here's a code sample for the problem

    <svg width='64px' height='64px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect  x='46' y='35' width='8' height='30' rx='5' ry='5' fill='#666666' transform='rotate(0 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect  x='46' y='35' width='8' height='30' rx='5' ry='5' fill='#666666' transform='rotate(36 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.1s' repeatCount='indefinite'/></rect><rect  x='46' y='35' width='8' height='30' rx='5' ry='5' fill='#666666' transform='rotate(72 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.2s' repeatCount='indefinite'/></rect><rect  x='46' y='35' width='8' height='30' rx='5' ry='5' fill='#666666' transform='rotate(108 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3s' repeatCount='indefinite'/></rect><rect  x='46' y='35' width='8' height='30' rx='5' ry='5' fill='#666666' transform='rotate(144 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4s' repeatCount='indefinite'/></rect><rect  x='46' y='35' width='8' height='30' rx='5' ry='5' fill='#666666' transform='rotate(180 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect  x='46' y='35' width='8' height='30' rx='5' ry='5' fill='#666666' transform='rotate(216 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6s' repeatCount='indefinite'/></rect><rect  x='46' y='35' width='8' height='30' rx='5' ry='5' fill='#666666' transform='rotate(252 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.7s' repeatCount='indefinite'/></rect><rect  x='46' y='35' width='8' height='30' rx='5' ry='5' fill='#666666' transform='rotate(288 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8s' repeatCount='indefinite'/></rect><rect  x='46' y='35' width='8' height='30' rx='5' ry='5' fill='#666666' transform='rotate(324 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9s' repeatCount='indefinite'/></rect></svg>

Anyone has any idea on how to fix this?

标签： javascripthtmlcsssvg

解决方案

update your chrome to the latest version(v68) and it should work.

推荐阅读