Почему эта простая SVG-анимация работает в FF, а не в Chrome?

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>