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:

 

 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);
   }
 }