帶有多個 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>