Question

我一直在尝试将循环背景用于各种SVG动画目的。进行了这个特殊的实验来象征降雨，但是，不幸的是，我无法在Chrome中正确显示此渲染-尽管在Firefox中似乎可以正常工作。

任何人都可以告诉我为什么它不能在Chrome中运行以及可以采取哪些措施对其进行修复。

过去，我使用另一种方法（背景图片）创建了一个下雨效果，但我想尝试/学习一种纯SVG / CSS方法。

   .wrapper{
      width:200px;
      border:1px solid red;
    }

    .rain{
      animation: rain-xy 2s linear infinite;
    }

    @keyframes rain-xy{
      0%{transform:translate(0px,0px);}
      100%{transform:translate(-100px,100px);}
    }

<div class="wrapper">
      <svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <g class="rain" fill="#484592">
          <circle cx="18.81" cy="16.61" r="4.407"/>
          <circle cx="71.19" cy="80.17" r="4.407"/>
          <circle cx="61.53" cy="45.76" r="4.407"/>
          <circle cx="20.34" cy="80.34" r="4.407"/>
          <circle cx="73.05" cy="18.47" r="4.407"/>
          <circle cx="25.25" cy="47.97" r="4.407"/>
          <circle cx="118.8" cy="16.61" r="4.407"/>
          <circle cx="171.2" cy="80.17" r="4.407"/>
          <circle cx="161.5" cy="45.76" r="4.407"/>
          <circle cx="120.3" cy="80.34" r="4.407"/>
          <circle cx="173.1" cy="18.47" r="4.407"/>
          <circle cx="125.3" cy="47.97" r="4.407"/>
          <circle cx="118.8" cy="-83.39" r="4.407"/>
          <circle cx="171.2" cy="-19.83" r="4.407"/>
          <circle cx="161.5" cy="-54.24" r="4.407"/>
          <circle cx="120.3" cy="-19.66" r="4.407"/>
          <circle cx="173.1" cy="-81.53" r="4.407"/>
          <circle cx="125.3" cy="-52.03" r="4.407"/>
          <circle cx="18.81" cy="-83.39" r="4.407"/>
          <circle cx="71.19" cy="-19.83" r="4.407"/>
          <circle cx="61.53" cy="-54.24" r="4.407"/>
          <circle cx="20.34" cy="-19.66" r="4.407"/>
          <circle cx="73.05" cy="-81.53" r="4.407"/>
          <circle cx="25.25" cy="-52.03" r="4.407"/>
        </g>
      </svg>
  </div>

为什么这个简单的SVG动画只能在FF中运行，而不能在Chrome中运行？

0 个答案: