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

181

04 августа 2018, 12:40

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

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

Оба варианта работают во всех доступных мне браузерах, не проверял только 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; 
}

<div id="wrapper"> 
  <svg id="wrapper_svg_1" viewBox="0 0 301 301" width="301" height="301"> 
   
 <path fill="none" id="icon-active" stroke="white" stroke-width="5" d="M100 65, 160 5, 195 40, 135 100, 195 160, 160 195, 100 135, 40 195, 5 160,  65 100, 5 40, 40 5z"> 
  
  <animate id="close" begin="indefinite" fill="freeze" attributeName="d" dur="0.2s"  
     to="M5 5, 195 5, 195 195, 145 195, 145 40, 125 40, 125 195, 75 195, 75 40, 55 40, 55 195, 5 195z"></animate> 
       <animate id="open" begin="indefinite" fill="freeze" attributeName="d" dur="0.2s"  
     to="M100 65, 160 5, 195 40, 135 100, 195 160, 160 195, 100 135, 40 195, 5 160,  65 100, 5 40, 40 5z"></animate> 
</path> 
 </svg> 
 
</div> 
<div id="wrapper"> 
  <svg id="menu-icon" viewBox="0 0 200 200" width="100%" height="100%" ng-click="iconActive = !iconActive"> 
 
 
        </svg> 
</div>

Вариант второй, можно реализовать при помощи смены 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; 
}

<div id="wrapper"> 
  <svg id="menu-icon" viewBox="0 0 200 200" width="100%" height="100%" ng-click="iconActive = !iconActive"> 
            <style> 
            #menu-icon { 
                background: grey; 
            } 
 
            #icon-active { 
                transition: all .3s; 
                 
            } 
            .icon-active { 
                d: path("M5 5, 195 5, 195 195, 145 195, 145 40, 125 40, 125 195, 75 195, 75 40, 55 40, 55 195, 5 195z"); 
                transition: all .3s; 
            } 
            </style> 
            <path fill="none" id="icon-active" stroke="white" stroke-width="5" d="M100 65, 160 5, 195 40, 135 100, 195 160, 160 195, 100 135, 40 195, 5 160,  65 100, 5 40, 40 5z"> 
            </path> 
        </svg> 
</div>

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

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

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

Главным образом,надо решить проблему с EDGE...

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

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

Answer 1

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

Пример кода:

<svg>
  <rect id="rectangle" width="100" height="100" fill="green"/>
</svg>
var rect= document.getElementById('rectangle');
rect.animate([{
  width: '200'
}, {
  width: '0'
}], {
  duration: 2000,
  iterations: 10
});

Создание сайта для дропшиппинга в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Активное поле после отправки данных на сервер

есть поле <td class="left"><input type="text" class="packed" placeholder="<?php echo $text_provider_enter?>"></td> в него вносятся данные с помощью сканера и они оправляются...

201

javascript

Как сделать проверку if/else ширину блока в Jquery?

Нужно повесить toggle событие на элемент, который будет изменять ширину блокаТо больше будет его делать, то меньше

184

javascript

Не работает iconContent

Использую кастомные иконки для отображения точек на карте, для отображения использую objectManager, даже если я убираю свойство для кастомной иконки,...

219

javascript

Ошибка функции iqTest()

В IQ тесте дается массив с числамиОдно из них отличается от других четностью/нечетностью

174