0

IE で encodeURIComponent() 内の何かをアニメーション化しようとしています。SMIL が IE でサポートされていないことは知っていますが、純粋な JS を使用して svg タグをアニメーション化/回転するよりもはるかに簡単です。以下は、Firefox と Chrome では機能するが IE では機能しないものの例です。

var uri = encodeURIComponent(
                '<?xml version="1.0" encoding="utf-8"?>' +
                '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" viewBox="0 0 120 40" xml:space="preserve">' +
                '<script type="text/javascript" xlink:href="http://leunen.me/fakesmile/smil.user.js"/>' +
                    '<circle cx="30" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">' +
                    '<animateMotion path="M 0 0 H 300 Z" dur="8s" repeatCount="indefinite" />' +
                    '</circle>' +
                 '</svg>');

FakeSmile への xlink:href は動的ではないため、問題なくアニメーションを処理できるはずだと思います。同様のフィドルを試してみると、タグ内で IE で動作することがわかります。

http://jsfiddle.net/FG3PG/1/

これは、jsfiddle 側のいくつかのメタ タグまたはその他の html コードのために機能しますか? それとも、私が含めたコードがencodeURIComponent()でラップされているという事実ですか? 最終的には、svg をラップする必要があります。そうしないと、アニメーションに関係なく、まったく表示されません。

4

1 に答える 1

1

Javascript は画像要素では実行されません。

ネイティブ SMIL を備えたブラウザーはアニメーションを実行しますが、fakesmile は SMIL の JavaScript エミュレーションであり、画像では機能しないため、アニメーションは IE では実行されません。

于 2014-09-23T06:24:41.220 に答える