1

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 で動作しています。つまり、アニメーション化されたパスが結果になります。

以下のリンクを参照してください。

http://jsfiddle.net/XbzRX/2/

サンプル リンク:

サンプル

アニメーションが IE ブラウザーで機能しない。(10,9)

ありがとう、

シヴァ

4

1 に答える 1

0

IE9/10 は、宣言型 SVG アニメーションをサポートしていません。ただし、一部のスタイル属性の CSS アニメーションとスクリプト化されたアニメーションはサポートしています。

こちらをご覧ください - 基本的な SVG アニメーション (MSDN)

于 2013-03-12T02:23:25.293 に答える