Как реализовать анимацию, нажимая SVG-фигуры в Edge и IE - PullRequest
Новая
       43

Как реализовать анимацию, нажимая SVG-фигуры в Edge и IE

0 голосов
/ 26 июня 2018

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

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>

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

Есть ли аналог для Microsoft Edge & IE?

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

В основном нам нужно решить проблему с Edge;IE - не обязательно, но для общей информации, и вы можете привести пример решения для этого браузера

1 Ответ

0 голосов
/ 26 июня 2018

Этот морфинг не может быть сделан только с SVG1.1 (все еще единственной версией, поддерживаемой большинством браузеров) и CSS.Вам нужен либо SMIL, либо сложная библиотека javascript, которая будет его реализовывать.

Я не хочу связывать вас с js-библиотекой, которая сделает это (отчасти потому, что я плохо знаю эти библиотеки), но SMIL кажетсядействительно лучший способ.

Поскольку вы хотите позвонить SVGAnimateElement.beginElement, я думаю, вы отображаете svg в месте, где может выполняться javascript, и это означает, что вы можете заполнить SMIL для браузеров IE.

При таком заполнении анимация должна запускаться в любом браузере, поддерживающем svg (IE9 +).

Здесь я буду использовать FakeSmile polyfill *, но есть и другиедоступно в инете. 

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;
}
<!-- include polyfill for IE -->
<script src="https://cdn.jsdelivr.net/gh/Kaiido/FakeSmile@1e50d675df616a8e784e0e6e931b3f0d595367d4/smil.user.js"></script>
<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>

* На самом деле в этой демонстрации используется вилка из указанной библиотеки, которая имеет давнюю ошибку , не обнаруживающую MS Edge, но неподдержка SMIL ...

...