javascript – How to implement click animation on SVG shapes in EDGE and IE?

Question:

This question can no longer be said to be relevant Microsoft Edge-Chromium Insider

So that there are no unnecessary questions, and there are no proposals that do not solve the issue. Changed the examples to the original.

Colleagues, I know two ways of animation…

Both options work in all browsers available to me, only Safari did not check

The first is using the 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>

Option two, can be implemented by changing the class-A element

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>

In the first example, Microsoft Edge does not support the elem.beginElement();

The question is, is there an equivalent for Microsoft Edge && IE?

And in the second option, the main thing is that class is added and removed to the left element, but it does not work. Who will tell you what to do?

Mainly, we need to solve the problem with EDGE…

IE – not necessarily, but for general information and you can give an example solution for this browser from – "SATAN"

This question on StackOverflow

Answer:

To solve this problem, you need to use a polyfill ( FakeSmile is not suitable, because it does not work in Microsoft Edge ( correct if wrong ) ). Here is the given polyfill – svg-animation . We connect scripts, add animation and test in browsers that do not support SMIL .

Code example:

<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
});
Post Views: 24
Scroll to Top