title: SVG Animation Issue in Safari
body: <p>I am trying to animate multiple SVG elements of a logo using CSS animation. </p>
  
  <p>I am using the 'use' method to reference the svg items. </p>
  
  <pre><code>&lt;svg class="star" viewBox="0 0 76.349 77.143"&gt;
   &lt;use xlink:href="&lt;?php bloginfo('template_directory'); ?&gt;/img/HEYDAY_star.svg#star"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The animation works perfectly well in Chrome and Firefox, however in Safari the SVG elements don't display whatsoever.</p>
  
  <p>As an example the animation is applied via css and jquery as below:-</p>
  
  <pre><code>.csstransforms .logo-animation #heyday.animate {
     top: -80px;
     animation: top 0.5s ease 1s 1 normal forwards;
     -webkit-animation: top 0.5s ease 1s 1 normal forwards;
  }
  </code></pre>
  
  <p>The site is currently visible at: <a href="http://heydaymarketing.com.au/staging/" rel="nofollow">http://heydaymarketing.com.au/staging/</a></p>
  
  <p>I believe it could be an issue with the 'use' tags? But I am not entirely sure.. </p>
  
  <p>Any assistance or ideas would be greatly appreciated.</p>