代碼如下（相關詳情在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='' 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 路徑發生變化。

在html5+css3中做到動態效果有4種方式：
1.transition(過渡)-通過屬性值的變化來平滑過渡產生動畫；

2.animate(動畫)-這是css3中的自帶的動畫，可以動過各種變形（比如形變、縮放、位移），這里的位移其實就可以實現弧線運動，但是這兒需要的代碼會非常多，個人是不建議用這個方法的。

3.canvas（畫布）-可以想象著拿著一支筆在畫筆上畫東西，映射到電腦上，就是在每個坐標上面畫東西。

4.svg-抱歉 這個我還沒研究。

推薦方式：
canvas，步驟：

1.要達到弧線運動，那么就必須知道弧線的公式
2.通過setinterval來設置每一幀的坐標，比如：
(function({
y=公式與x的聯系
} ,30)//這兒的30，代表30毫秒為一幀。
補充：如果要有個重復動作，那么久必須設置一個臨界值，然后點返回原點重復動作；