html - 通过 SMIL 的 SVG 动画。Safari 中的重复动画错误

Question

我有一个通过 SMIL 动画的相对简单的路径。在 Chrome 和 Firefox 中一切正常。IE/Edge 支持无关紧要。

然而，Safari 的行为很奇怪，而且很容易重新创建。不幸的是，Safari 的工作至关重要。

<nav>
  <button id="button1" onClick="document.getElementById('animate1').beginElement()">1</button>
  <button id="button2" onClick="document.getElementById('animate2').beginElement()">2</button>
  <button id="button3" onClick="document.getElementById('animate3').beginElement()">3</button>
  <button id="button4" onClick="document.getElementById('animate4').beginElement()">4</button>
  <button id="button5" onClick="document.getElementById('animate5').beginElement()">5</button>
</nav>

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  x="0px"
  y="0px"
  width="100%"
  height="100%"
  viewBox="0 0 1000 1000"
  style="enable-background:new 0 0 1000 1000;"
  xml:space="preserve"
  preserveAspectRatio="none">

  <path d="M0,0 830,0 1000,300 1000,1000 500,1000 80,1000z">

    <animate id="animate1" attributeName="d" begin="indefinite" dur=".3s" fill="freeze" keyTimes="0;1" to="M0,0 830,0 1000,300 1000,1000 500,1000 80,1000z" calcMode="spline" keySplines="0.4, 0, 0.2, 1" />
    <animate id="animate2" attributeName="d" begin="indefinite" dur=".3s" fill="freeze" keyTimes="0;1" to="M150,0 750,0 1000,150 1000,1000 500,1000 0,1000z" calcMode="spline" keySplines="0.4, 0, 0.2, 1" />
    <animate id="animate3" attributeName="d" begin="indefinite" dur=".3s" fill="freeze" keyTimes="0;1" to="M50,0 750,0 1000,150 1000,1000 500,1000 0,1000z" calcMode="spline" keySplines="0.4, 0, 0.2, 1" />
    <animate id="animate4" attributeName="d" begin="indefinite" dur=".3s" fill="freeze" keyTimes="0;1" to="M250,0 750,0 1000,450 1000,1000 500,1000 0,1000z" calcMode="spline" keySplines="0.4, 0, 0.2, 1" />
    <animate id="animate5" attributeName="d" begin="indefinite" dur=".3s" fill="freeze" keyTimes="0;1" to="M0,0 930,0 1000,600 1000,1000 500,1000 80,1000z" calcMode="spline" keySplines="0.4, 0, 0.2, 1" />

  </path>
</svg>

代码笔： https ://codepen.io/anon/pen/vwWKYN

单击任何按钮后，路径都会动画。其他按钮单击将正确地为 svg 设置动画，直到第二次单击选定的第一个按钮。

例如，单击 4。1、2、3、5 将起作用，直到您再次单击 4。一旦您再次单击 4，动画就会停止，您必须按任意顺序选择 1、2、3、5 才能“解锁”动画。单击 4 以外的任何按钮，它们将继续动画。

我在这上面花了几个小时，并尝试在“to”之外添加“from”，更改了路径、顺序、keySplines、keyTimes。我还创建了一个具有相同结果的 js 函数。

注意：我试图避免使用第三方库。我意识到 SMIL 不如 GSAP 或 Snap.js 好，但这就是我制作动画所需的全部内容，而且它大部分都有效。

谢谢你的帮助！

标签： htmlanimationsvgsmil