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")。

我不知道是否有更好的方法来实现我想要的，我还没有在网上找到任何类似于我想要实现的代码。我找到了显示/隐藏 javascripts，但不知道如何用它们实现检测该功能。

这段代码似乎至少做了一些事情，但它似乎遵循“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"没必要，就删了。现在它似乎可以在 Firefox 13 和 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 回答