0

SMIL を使用して SVG アニメーションを作成する実験を行っています。最新の Firefox では問題なく動作しますが、もちろん IE では動作しません。私はすでに同様の Flash アニメーションを持っています。私の計画は、ページに Flash と SVG の両方のアニメーションを含め、javascript の検出に基づいてそれらを表示/非表示にすることでした。しかし、私は JavaScript が苦手で、どうすればよいかわかりません。リンクされた .js ファイルを使用します。私の計画は、ページの読み込み時にブラウザが機能「http://www.w3.org/TR/SVG11/feature#AnimationEventsAttribute」をサポートしているかどうかを検出し、サポートされている場合は Flash オブジェクト (id="rotateFlash) を非表示にすることです。 ") SVG オブジェクト (id="rotateSVG") を表示します。

私が望むものを達成するためのより良い方法があるかどうかはわかりません.また、私が達成しようとしているものに似たコードをオンラインで見つけていません. javascript の表示/非表示を見つけましたが、その機能を検出する実装方法がわかりません。

このコードは少なくとも何かをしているようですが、「else」コマンドに従っているようです。これは、Firefox が機能を「True」として検出していないことを意味していると思います (どちらも IE9 ではありませんが、それは予想されていたことです)。

function supportsSvg() {
  if(document.implementation.hasFeature ("http://www.w3.org/TR/SVG11/feature#AnimationEventsAttribute", "1.0") == "true" ) {
    document.getElementById("rotateSVG").style.display = "";
    document.getElementById("rotateFlash").style.display = "none";
  }
  else {
    document.getElementById("rotateSVG").style.display = "none";
    document.getElementById("rotateFlash").style.display = "";
  }
}

他に何をすべきかわかりません。他のより単純な SVG 機能を試してみましたが、同じ結果が得られました。Modernizr について読み続けていますが、私には複雑すぎるようです。どうやって、なぜ、うまくいくのかわかりません。

4

1 に答える 1

2

私はついにそれを機能させたと思います。コードを見たところ、== "true"不要だと感じたので削除しました。現在、Firefox13およびIE9で動作しているようです。

function supportsSvg() {
  if(document.implementation.hasFeature ("http://www.w3.org/TR/SVG11/feature#AnimationEventsAttribute", "1.0")) {
    document.getElementById("rotateSVG").style.display = "";
    document.getElementById("rotateFlash").style.display = "none";
  }
  else {
    document.getElementById("rotateSVG").style.display = "none";
    document.getElementById("rotateFlash").style.display = "";
  }
}
于 2012-06-29T07:19:34.590 に答える