SVG animation не срабатывает в FF

194

27 апреля 2018, 13:41

Коллеги есть такой код. Кнопка для плеера 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>

Особо рассказывать, что тут к чему, думаю не стоит.

Единственная проблема в том, что данная анимация на срабатывает в FF. При клике как есть изначальная фигура так и остается.

Пол дня ковыряюсь не могу понять, что к чему и почему так.

Answer 1

Коллеги, оказалось все просто. Формат атрибута dur="n" у меня dur=".1s", что FF и не нравиться. Формат атрибута dur="n" должен быть такой dur="0.1s" и все заработает

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>