Colleagues have such a code. Button for player play-pause .

 let flag = true, pause = document.getElementById('pause'), play = document.getElementById('play'); document.getElementById('wrapper_svg_1').addEventListener('click', function() { if (flag == true) { pause.beginElement(); flag = false; } else { play.beginElement(); flag = true; } console.log(flag); }); 
 <play-pause id="playpause" play-pause custom> <svg id="wrapper_svg_1" viewBox="0 0 200 300" width="200" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <style> #wrapper_svg_1 { background: trensparent; } </style> <path fill="grey" stroke="none" stroke-width="1" d="M100 100, 50 50, 50 250, 100 200z M100 100, 150 150, 150 150, 100 200z"> <animate id="pause" begin="indefinite" fill="freeze" attributeName="d" dur=".1s" to="M90 50, 50 50, 50 250, 90 250z M110 50, 150 50, 150 250, 110 250z" /> <animate id="play" begin="indefinite" fill="freeze" attributeName="d" dur=".1s" to="M100 100, 50 50, 50 250, 100 200z M100 100, 150 150, 150 150, 100 200z" /> </path> </svg> </play-pause>

Especially tell what's what, I think not worth it.

The only problem is that this animation does not work in FF. When you click as it is, the original figure remains.

Half a day picking I can not understand what was happening and why so.

    1 answer 1

    Colleagues, everything turned out to be simple. The dur="n" attribute format is my dur=".1s" , which is not like FF. The dur="n" attribute format should be such a dur="0.1s" and it will work.

     let flag = true, pause = document.getElementById('pause'), play = document.getElementById('play'); document.getElementById('wrapper_svg_1').addEventListener('click', function() { if (flag == true) { pause.beginElement(); flag = false; } else { play.beginElement(); flag = true; } console.log(flag); }); 
     <play-pause id="playpause" play-pause custom> <svg id="wrapper_svg_1" viewBox="0 0 200 300" width="200" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <style> #wrapper_svg_1 { background: trensparent; } </style> <path fill="grey" stroke="none" stroke-width="1" d="M100 100, 50 50, 50 250, 100 200z M100 100, 150 150, 150 150, 100 200z"> <animate id="pause" begin="indefinite" fill="freeze" attributeName="d" dur="0.1s" to="M90 50, 50 50, 50 250, 90 250z M110 50, 150 50, 150 250, 110 250z" /> <animate id="play" begin="indefinite" fill="freeze" attributeName="d" dur="0.1s" to="M100 100, 50 50, 50 250, 100 200z M100 100, 150 150, 150 150, 100 200z" /> </path> </svg> </play-pause>