带延迟的循环动画 SVG - safari答案

【问题标题】：Animate SVG in loop with delay - safari带延迟的循环动画 SVG - safari
【发布时间】：2018-10-31 22:02:21
【问题描述】：

我创建了一个基本的 svg 动画，它会延迟循环，但是一旦它完成了一个动画循环，它就会跳回到开头，让它看起来很难看。此问题仅在 safari 中出现。

<polygon id="obrys" fill="#FFFFFF" stroke="#1D1D1B" stroke-width="2" stroke-miterlimit="10" points="217.85,164.21 31,164.39 
    31.14,31.18 218.09,31       "/>

<g id="wing_all">
    <polygon id="wing_border_in" fill="none" stroke="#1D1D1B" stroke-width="2" stroke-miterlimit="10" points="195.41,142.85 
        53.82,142.76 53.68,52.14 195.26,52.23       "/>

    <polygon id="wing" fill="#FFFFFF" stroke="#1D1D1B" stroke-width="2" stroke-miterlimit="10" points="42.27,41.67 206.57,41.79 
        206.81,155.06 42.52,154.95      ">
        <animate 
            id="anim" 
            attributeName="points" 
            dur="0.2s"  
            fill="freeze"
            to="37.27,61.67 211.57,61.79 206.81,155.06 42.52,154.95" 
            begin="2s; anim_return.end+3"  />
        <animate 
            id="anim_return" 
            attributeName="points" 
            dur="0.2s" 
            fill="freeze"
            to="42.27,41.67 206.57,41.79 206.81,155.06 42.52,154.95" 
            begin="anim.end + 1s"  />
    </polygon>
</g>

Example Codepen

【问题讨论】：

不确定这是您的问题，但您没有忘记anim_return.end+3 中的s 吗？
很遗憾没有。
你可以尝试设置属性accumulate="sum"。

标签： html svg

【解决方案1】：

Safari 的实现似乎确实存在一个错误，第一个 <animate> 的 fill="freeze" 将覆盖第二个的动画值。

解决此问题的一种方法是使用多个values 和keyTimes 属性通过单个<animate> 制作动画，不幸的是不太清晰。

<svg viewBox="0 0 249.09 535.39"  width="200" height="500">
  <polygon fill="#FFFFFF" stroke="#1D1D1B" stroke-width="2"
points="217.85,164.21 31,164.39 31.14,31.18 218.09,31"/>

  <g id="wing_all">
    <polygon fill="none" stroke="#1D1D1B" stroke-width="2"
      points="195.41,142.85 53.82,142.76 53.68,52.14 195.26,52.23"/>

    <polygon fill="#FFFFFF" stroke="#1D1D1B" stroke-width="2" 
      points="42.27,41.67 206.57,41.79 206.81,155.06 42.52,154.95">
      <animate 
        attributeName="points" 
        dur="4.4s"
        repeatCount="indefinite"
        values="42.27,41.67 206.57,41.79 206.81,155.06 42.52,154.95;
                37.27,61.67 211.57,61.79 206.81,155.06 42.52,154.95;
                37.27,61.67 211.57,61.79 206.81,155.06 42.52,154.95;
                42.27,41.67 206.57,41.79 206.81,155.06 42.52,154.95;
                42.27,41.67 206.57,41.79 206.81,155.06 42.52,154.95"
        keyTimes="0;0.045;0.272;0.318;1"
        begin="2s"/>
    </polygon>
  </g>
</svg>

【讨论】：