Как реализовать анимацию по клику SVG фигур в EDGE и IE?

#javascript #css #svg #анимация #microsoft_edge

  Данный вопрос уже можно сказать не актуален  Microsoft Edge-Chromium
  Insider


 


  Чтобы не возникало лишних вопросов, и не было предложений, которые не
  решают  вопроса. Изменил примеры на оригинал.


Коллеги, я знаю два способы анимации...


  Оба варианта работают во всех доступных мне браузерах, не проверял только Safari


Первый - это с использованием функции elem.beginElement();



var wrapper_svg_1 = document.getElementById("wrapper_svg_1"),
  close = document.getElementById('close'),
  open = document.getElementById("open");

let flag = true;

wrapper_svg_1.addEventListener('click', function() {
  if (flag == true) {
    close.beginElement();
    flag = false;
  } else {
    open.beginElement();
    flag = true;
  }
});
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100vw;
  height: 100vh;
  background: #272727;
  font-size: 20px;
}

#wrapper {
  width: 100vw;
  height: 100vh;
  background: transparent;
}

  



  





Вариант второй, можно реализовать при помощи смены class-A элементу



let wrapper = document.getElementById("wrapper"),
  iconActive = document.getElementById("icon-active");
wrapper.addEventListener('click', function() {
  iconActive.classList.toggle('icon-active');
});
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100vw;
  height: 100vh;
  background: #272727;
  font-size: 20px;
}

#wrapper {
  width: 100vw;
  height: 100vh;
  background: transparent;
}

  





В первом примере Microsoft Edge не поддерживает функцию  elem.beginElement();

Вопрос, есть ли ее аналог для Microsoft Edge && IE?

А во-втором варианте, главное то, что class элементу left добавляется и удаляется,
но не работает. Кто подскажет, что делать?


  Главным образом,надо решить проблему с EDGE...  
  
  IE - не обязательно,
  но для общей информации и можно привести пример решение для этого браузера от -
"САТАНЫ"


Данный вопрос на StackOverflow
    

Ответы

Ответ 1

Для решения данной проблемы нужно использовать polyfill( FakeSmile не подходит, так
как не работает в Microsoft Edge ( исправьте, если не прав ) ). Вот данный polyfill
— svg-animation. Подключаем скрипты, добавляем анимацию и тестируем в браузерах, которые
не поддерживают SMIL.

Пример кода:



var rect= document.getElementById('rectangle');
rect.animate([{
  width: '200'
}, {
  width: '0'
}], {
  duration: 2000,
  iterations: 10
});