如何通过在Edge和IE中单击SVG形状来实现动画

Question

同事们，我知道两种动画方式。这两个选项都适用于我可以访问的所有浏览器;我没有只检查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 - 不一定，但是对于一般信息，您可以为此浏览器提供示例解决方案

Answer 1

仅使用SVG1.1（仍然是大多数浏览器支持的唯一版本）和CSS无法实现此变形。您需要SMIL或将实现它的复杂JavaScript库。

我不愿意将你链接到一个可以做到这一点的js lib（部分是因为我不太了解这些库），但SMIL似乎确实是最好的方法。

既然你想要调用SVGAnimateElement.beginElement，我猜你会在一个可以执行javascript的地方显示你的svg，这意味着你可以为IE浏览器填充SMIL。

使用这样的polyfill，您的动画应该在任何支持svg（IE9 +）的浏览器中运行。

在这里，我将使用FakeSmile polyfill *，但Internets上还有其他可用的。

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>

*实际上这个演示使用了一个所述库的Fork，其中a long standing bug未能检测到MS Edge不支持SMIL ...