Анимировать SVG в цикле с задержкой - сафари

Question

Я создал базовую анимацию SVG, которая зацикливается с задержкой, однако, как только она закончила один цикл анимации, она возвращается к началу, придавая ей ужасный сложный вид.Эта проблема возникает только в сафари.

<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>

Пример Codepen

Answer 1

Похоже, что в реализации Safari действительно есть ошибка, когда fill="freeze" первого <animate> переопределит анимированное значение второго.

Один из способов обойти эту проблему - это сделатьВаша анимация через один <animate>, к сожалению, менее четкая, с использованием нескольких values и атрибута keyTimes.

<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>