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

Question

不知道何时以及如何加载svg动画，但我使用的加载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)，它应该可以工作。

Answer 2

如果您不使用svg作为背景，而是实际将svg代码放入html中，则可以很好地工作。

​

<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>

​