带有多个 SVG 的奇怪 Safari 行为<animate>的

Question

我试图在多边形上使用多个<animate>标签为 SVG 播放停止按钮<animate> ，这样在每个<animate>上运行beginElement()会导致形状改变其点。 这在 Chrome 和 Firefox 中效果很好，但是，在 Safari 中进行测试时，我似乎只能激活一个<animate>标签。

我目前所拥有的如下：

 playState = true; function toggle() { playState = !playState; document.querySelector("#to" + (playState ? "Play" : "Stop")).beginElement(); console.log("Changed state to " + (playState ? "play" : "stop") + ".") } document.querySelector("#toggle").addEventListener("click", toggle); toggle();

 #toggle circle { fill: #808080; } #toggle polygon { fill: #DCDCDC; }

 <svg id="toggle" viewBox="0 0 300 300"> <circle cx="150" cy="150" r="100"/> <polygon points="150,150 150,150 150,150 150,150"> <animate fill="freeze" id="toStop" attributeName="points" dur="500ms" to="100,100 100,200 200,200 200,100" begin="indefinite" calcMode = "spline" keySplines = "0 0.75 0.25 1" keyTimes = "0;1"/> <animate fill="freeze" id="toPlay" attributeName="points" dur="500ms" to="120,100 120,200 206.6025403784,150 206.6025403784,150" begin="indefinite" calcMode = "spline" keySplines = "0 0.75 0.25 1" keyTimes = "0;1"/> </polygon> </svg>

在Safari的测试，我可以正确触发#toPlay最初，但是，事后，运行beginElement()上#toPlay闪烁两种状态之间并激活#toStop什么都不做。 这几乎就像#toStop动画被延迟，然后在#toPlay再次触发时快速运行。

Answer 1

我自己想出来的！ 然而，我被迫稍微妥协。 Jesus CMD 解释说，您需要在每次调用beginElement()重置 SVG 动画。 这个解决方案的缺点是动画必须重置为多边形点的初始值，所以我希望拥有三种可能的多边形形状（一个点、一个正方形和一个三角形）必须缩小到只有两种状态：播放和停止。

更改后的片段如下。

 playState = true; svg = document.querySelector("#toggle"); function toggle() { playState = !playState; if (playState) { svg.pauseAnimations(); svg.setCurrentTime(0); svg.unpauseAnimations(); document.querySelector("#toPlay").beginElement(); } else { document.querySelector("#toStop").beginElement(); } //document.querySelector("#to" + (playState ? "Play" : "Stop")).beginElement(); console.log("Changed to " + (playState ? "Play" : "Stop")) } svg.addEventListener("click", toggle); toggle();

 #toggle circle { fill: #808080; } #toggle polygon { fill: #DCDCDC; }

 <svg id="toggle" viewBox="0 0 300 300"> <circle cx="150" cy="150" r="100"/> <polygon points="100,100 100,200 200,200 200,100"> <animate fill="freeze" id="toStop" attributeName="points" dur="500ms" to="100,100 100,200 200,200 200,100" begin="indefinite" calcMode = "spline" keySplines = "0 0.75 0.25 1" keyTimes = "0;1"/> <animate fill="freeze" id="toPlay" attributeName="points" dur="500ms" to="120,100 120,200 206.6025403784,150 206.6025403784,150" begin="indefinite" calcMode = "spline" keySplines = "0 0.75 0.25 1" keyTimes = "0;1"/> </polygon> </svg>