javascript - 背景图像 SVG 动画停止在 chrome 上工作

Question

不确定何时或如何，但我使用的加载 svg 动画不再适用于 Chrome(例如仍然适用于 safari 和 firefox)。

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>

有人知道如何解决这个问题吗？

Answer 1

将您的 chrome 更新到最新版本 (v68)，它应该可以工作。