svg 怎么应用 CSS3 的过渡效果，实现 path 路径的平滑过渡？？

Question

svg 怎么应用 CSS3 的过渡效果，实现 path 路径的平滑过渡？？

想要实现的效果：

由这张图 平滑过渡到：

代码如下（相关详情在js代码部分）：

 css: 
   #svg , #path {
      transition:all 0.5s ease-in-out;
      -webkit-transition:all 0.5s ease-in-out;
      -moz-transition:all 0.5s ease-in-out;
      -o-transition:all 0.5s ease-in-out;
      -ms-transition:all 0.5s ease-in-out;
   }
   #path {
      fill:#e7e7e7;
      stroke:none;
   }
 html:

 <svg width='100' height='100' xmlns='http://www.w3.org/2000/svg' version='1.1' id='svg'>
    <path d='' id='toggle' id='path'></path>
 </svg>

 javascript: 
 
 var d1 = 'M 0 0 h 5 v 20 h -5 L 0 0  M 11 0 h 5 v 20 h -5 L 11 0 Z';
 var d2 = 'M 0 0 L 18 11 L 0 22 L 0 0 Z';
 var svg = $id('svg');
 var path = $id('path');

 // 实现点击 svg 路径发生变化。
 // 不过普通情况（无 CSS3 Transition 效果下），过渡很生硬
 // 但是貌似无论我给 svg 还是 path 亦或是两者都加： transition: all 0.5s ease-in-out
 // 都无法实现平滑过渡!
 // 是否 svg 不支持 CSS3 的 transition ？？
 loginEvent(svg , 'click' , setPath , false ,false);
 function setPath(){
   var d = path.getAttribute('d');
   if (d === '' || d === d2) {
      path.setAttribute(d , d1);
   } else {
     path.setAttribute(d , d2);
   }
 }

Answer 1

https://code.h5jun.com/mugi/1...

要让 CSS3 动画过渡支持路径过渡最重要的一点是要让两个过渡的路径保证锚点数一致，否则对浏览器无法计算出补间动画自然就无法帮忙过渡了。当然是用一些 JS 库也是可以做到计算不同锚点路径的补间动画的，具体可以参考我之前写的文章：https://imnerd.org/svg-animat...