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

Posted 2023-03-06

【中文标题】如何在 Edge 和 IE 中通过单击 SVG 形状来实现动画

【英文标题】：How to implement animation by clicking SVG shapes in Edge and IE

【发布时间】：2018-12-04 20:02:15

【问题描述】：

这个问题已经可以说不相关了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;

<div id="wrapper">
  <svg id="wrapper_svg_1" viewBox="0 0 301 301"  >
  
 <path fill="none" id="icon-active" stroke="white" stroke- 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"   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"   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- 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 - 不一定，但对于一般信息，您可以为此浏览器提供示例解决方案

【问题讨论】：

您可以使用诸如FakeSmile 之类的 polyfill 在 IE 和 Edge 上添加 SMIL 支持 对于您的第二个 sn-p 您正在使用一些仅 SVG2 的语法，目前只有 Chrome 能够解释它，所有其他的会失败。

@Kaiido，FakeSmile 在 Edge 中不起作用。官网也有。

F̶o̶r̶̶y̶o̶u̶r̶̶s̶e̶c̶o̶n̶d̶̶v̶a̶r̶i̶a̶n̶t̶̶y̶o̶u̶̶n̶e̶e̶d̶̶t̶o̶̶p̶o̶l̶y̶f̶i̶l̶l̶̶c̶l̶a̶s̶s̶s6532̶s̶t, @9.7bad

@Arthur 你完全正确......我虽然他们已经修复了它，但忘记了我使用叉子......将其包含在答案中

@ippi 和 SVG2...d 属性不能从 SVG1.1 中的 CSS 设置

【参考方案1】：

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

我不愿意将您链接到可以执行此操作的 js 库（部分原因是我不太了解这些库），但 SMIL 似乎确实是最好的方法。

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

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

这里我将使用FakeSmilepolyfill*，但互联网上还有其他可用的。

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"  >
    <path fill="none" id="icon-active" stroke="white" stroke- 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>

*实际上这个demo使用了上述库的一个Fork，它有a long standing bug未能检测到MS Edge不支持SMIL...