SVG符号动画不适用于Safari

Question

我目前正在努力使用SVG。 现在，我正在尝试在我的网页中显示动画SVG。为了做到这一点，我只是将svg代码放在正文的末尾，并使用html标签“use”来嵌入我的SVG（其中包含一个符号）。 这是我的SVG代码：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient x1="100%" y1="0%" x2="0%" y2="100%" id="linearGradient">
   <stop offset="0%" stop-color="#7A5FFF">
    <animate attributeName="stop-color" values="#05FFA3; #45CAFC; #7873F5; #FC6262; #05FFA3;" dur="10s" repeatCount="indefinite"></animate>
   </stop>
   <stop offset="100%" stop-color="#01FF89">
    <animate attributeName="stop-color" values="#2096FF; #303F9F; #FF6EC4; #FFD86F; #2096FF;" dur="10s" repeatCount="indefinite"></animate>
   </stop>
  </linearGradient>
 </defs>
 <symbol x="0px" y="0px" width="308px" height="308px" viewBox="0 0 308 308" id="svg-logo">
  <circle cx="150" cy="150" r="150" fill="url(#linearGradient)" />
 </symbol>
</svg>

以下是我将其嵌入页面的方式：

<svg class="star">
 <use xlink:href="#svg-logo">
</svg>

除了野生动物园外，它的工作正常。线性渐变动画完全破碎，如下所示：