Question

从iOS Safari中引用的任何SVG元素引用时，我的动画渐变无法在iOS Safari中正确呈现。

我的笔记本电脑上的Chrome和Firefox一切正常。在iOS Safari中，第二个动画显示为冻结。奇怪的是，当我旋转显示屏以在纵向和横向之间切换时，动画将显示为跳跃并冻结在新位置。

这是iOS Safari中的错误还是我做错了什么？

svg {
  width: 128px;
  height: 128px;
}

<svg viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="shimmer" cx="0" cy="1" r="2">
      <stop offset="-0.5" stop-color="MediumSlateBlue">
        <animate attributeName="offset" from="-0.5" to="1" dur="2500ms" repeatCount="indefinite" />
      </stop>
      <stop offset="-0.25" stop-color="DeepSkyBlue">
        <animate attributeName="offset" from="-0.25" to="1.25" dur="2500ms" repeatCount="indefinite" />
      </stop>
      <stop offset="0" stop-color="MediumSlateBlue">
        <animate attributeName="offset" from="0" to="1.5" dur="2500ms" repeatCount="indefinite" />
      </stop>
    </radialGradient> 
  </defs>
  <rect width="100%" height="100%" fill="url(#shimmer)"></rect>
</svg>

<svg viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="url(#shimmer)"></rect>
</svg>

SVG渐变动画在iOS Safari中无效

0 个答案: