SVG animation not working when in a use tag

I am trying to get an animation for a loading icon. I know that the animation tag in SVGs don't work in IE without a polyfill of JS or something so I am avoiding that and leaning toward a purely CSS animation. The style of SVG inclusion is they all live in a central area and with the "use" tag they are called by ID to fill in where they are needed. I was able to animate the SVG fine when it was written on the page, but once I tried to call it with the USE tag it fails to animate in chrome. Has anyone else run into this issue?

I included code here of the CSS and HTML I am using. Each line tag in the svg is given an animation delay based on its position in the html and the animation is set to change the opacity. NO JAVASCRIPT

https://jsfiddle.net/mfeola/k7pqxp6c/

<div class="test">
  <svg viewBox="0 0 64 64" id="spinner-test">
    <title>spinner</title>
    <g stroke-width="4" stroke-linecap="round">
      <line y1="17" y2="29" transform="translate(32,32) rotate(180)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(210)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(240)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(270)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(300)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(330)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(0)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(30)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(60)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(90)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(120)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(150)"></line>
    </g>
  </svg>

  <svg>
    <use xlink:href="#spinner-test"></use>
  </svg>
</div>