Question

我已经创建了一个基本的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

Answer 1

在Safari的实现中确实存在一个错误，其中第一个fill="freeze"的{{1}}将覆盖第二个<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>

使用延迟 - safari在循环中动画SVG

1 个答案: