使用SMIL动画时,SVG图像在iOS 13.3 / XS上闪烁。在Safari或Chrome中。没有不同

时间:2019-12-25 21:00:08

标签: ios svg css-animations svg-animate

动画在所有桌面浏览器以及带有iOS 12的iPhone 6或8上都可以很好地工作。

在安装了iOS 13.3的iPhone XS上,观察到周期性闪烁。

<style type="text/css">
  @-webkit-keyframes anim_pet {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
  }
  @keyframes anim_pet {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
  }
  .anim_pet {
    -webkit-animation: anim_pet 120s infinite linear;
    animation: anim_pet 120s infinite linear;
  }
</style>

<defs>
  <symbol id="symbol_pet">
    <path d="M0 0 L0.54 0.26 L0.79 1.29 L0.59 2.16 L-0.07 3.25 L-1.4 4.43 L-3.66 5.45 L-7.07 5.87 L-11.73 5.07 L-14.5 3.94 L-17.52 2.15 L-20.71 -0.43 L-23.96 -3.95 L-27.11 -8.57 L-29.97 -14.44 L-32.27 -21.69 L-33.7 -30.44 L-33.87 -40.75 L-32.32 -52.65 L-28.55 -66.09 L-21.95 -80.91 L-11.89 -96.83 L2.34 -113.45 L21.46 -130.14 L46.2 -146.11 L77.24 -160.3 L115.21 -171.39 L160.59 -177.78 L213.65 -177.54 L274.38 -168.44 L342.41 -147.92 L416.87 -113.12 L496.27 -60.93 "/>
  </symbol>
</defs>

<radialGradient id = "gra1" cx = "0%" cy = "0%" r = "424px" gradientUnits="userSpaceOnUse">
  <stop stop-color = "rgb(176,156,184)" offset = "0.2">
    <animate restart="never" attributeName="offset" calcMode="spline" values="0.2; 0.8"  keySplines="0.0 0.0 1.0 1.0" dur="8.0s" repeatCount="1" fill="freeze"/>
  </stop>
</radialGradient>

<g id="flower" stroke="url(#gra1)">
  <g>
    <use class="anim_pet" xlink:href="#symbol_pet"/>
    <g transform="scale(-1,1)">
      <use class="anim_pet" xlink:href="#symbol_pet"/>
    </g>
  </g>

  <g transform="rotate(-30)">
    <use class="anim_pet" xlink:href="#symbol_pet"/>
    <g transform="scale(-1,1)">
      <use class="anim_pet" xlink:href="#symbol_pet"/>
    </g>
  </g>

  ...

  <g transform="rotate(-330)">
    <use class="anim_pet" xlink:href="#symbol_pet"/>
    <g transform="scale(-1,1)">
      <use class="anim_pet" xlink:href="#symbol_pet"/>
    </g>
  </g>
</g>

enter image description here

此外,如果我移除渐变并填充路径,则闪烁消失。

... <g id="flower" stroke="blue"> ...

如我所见,这是操作系统中的错误,因为在Chrome和Safari中都可以看到它。

还是我错了?

为什么在最新的iphone中确实会出现这种荒诞的现象?

自2012年以来,没有任何浏览器支持此功能:)至少达到我的支持水平。

0 个答案:

没有答案