SVG ライン/パス アニメーションを使用したシンプルな MVC3 アプリケーションを作成しました。以下のコード スニペットを参照してください。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="curtainClip">
<rect id="clipRect" x="0" y="0" width="100" height="100"/>
</clipPath>
</defs>
<animate xlink:href="#clipRect"
attributeName="width"
dur="15s"
from="0"
to="100" />
<path clip-path="url(#curtainClip)" stroke="red" d="M 0 0 L 100 100"/>
</svg>
JS-fiddle /JS-bin で動作しています。つまり、アニメーション化されたパスが結果になります。
以下のリンクを参照してください。
サンプル リンク:
アニメーションが IE ブラウザーで機能しない。(10,9)
ありがとう、
シヴァ