1

以下のコードを参照してください。

<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>

SVg animate 要素が IE ブラウザーで機能しない。どうすればこれを修正できますか? IE10 ブラウザのバグなのか、IE ブラウザで動作するようにコードを追加する必要があるのか​​。

以下のリンクを参考にしました。

SVG アニメーションを ie9 と firefox で動作させることができません

ありがとう、

シヴァ

4

1 に答える 1

3

Internet Explorer ではサポートされていないSMIL (宣言型) アニメーションを使用しています。私の知る限り、Microsoft はこれをサポートする予定はありません。このページから、

「スクリプトベースのアニメーションは、単純なアニメーションの可能性だけでなく、複雑なアニメーションの可能性への扉も開きます。このため、およびその他の理由 (CSS アニメーションなど) により、IE9 は宣言型アニメーションをサポートしていません。」

Microsoft は、スクリプト ベースのアニメーションを使用することを強く望んでいます。したがって、現在のすべてのブラウザーで SVG をアニメーション化する場合は、Javascript を使用する必要があります。または、Microsoft が示唆しているように、 CSS animationを使用することもできます。私の意見では、例の単純なアニメーションには CSS アニメーションが最適です。

于 2013-03-08T11:52:17.530 に答える