【问题标题】:How to detect if SVG animation is available如何检测 SVG 动画是否可用
【发布时间】:2011-04-10 04:21:23
【问题描述】:

有没有好办法检测SVG动画是否可用,然后适当调整DOM?

我正在使用 animateMotion 为包含 images 的 g 的运动设置动画。这仅适用于 Mozilla;更糟糕的是,未启动 animateMotion 会使图像在 Mozilla 和 WebKit 中处于不同的位置(但在每个位置都不相同!)。

似乎我需要一种方法来调整 g 和 images 上的属性以处理每种情况,并且只有在可行的情况下才添加 animateMotion 标签。有什么建议吗?

【问题讨论】:

    标签: animation webkit svg mozilla smil


    【解决方案1】:

    Modernizr 只检测高级功能的存在并相信浏览器不会说谎。例如,Desktop Safari 对 Modernizr 的 SMIL 有一个很大的“是”。但是几乎所有浏览器(甚至 Firefox 4!)都只部分实现了 SMIL,并且您必须测试每个单独的属性动画才能准确确定哪个在工作或不工作。

    例如,您不能使用 SMIL 为 Desktop Safari 中路径动画上的文本的 startOffset 设置动画。没有库可以检测此类功能是否存在。

    恕我直言,如果它们存在,您应该在 IE 以外的所有东西上使用 CSS 转换/动画来实现通用动画。对于 IE,使用 Javascript(或 Canvas)动画。

    (顺便说一句,Chrome 上的 animateTransform 已损坏 - 它计算错误)

    【讨论】:

      【解决方案2】:

      我刚刚在运行 Android 4.2.2 的三星手机上遇到了这个问题。它会报告所有这三个都是真的:Modernizr.svg, Modernizr.svgclippaths, Modernizr.smil 但没有动画和剪辑路径搞砸了。看起来只有一个元素可以有剪辑路径。无论如何,我们以这个不太好的解决方案结束了:

      isAndroid = /Android/.test( navigator.userAgent );
      

      抱歉,Android 用户,您只会看到备用图片。这是一个可怕的修复,但它仅适用于简单的徽标动画,所以......

      【讨论】:

        【解决方案3】:

        Modernizr 检测到对 SVG 动画 (SMIL) 的支持。

        如果没有完整的示例,就无法确定造成差异的原因。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2023-04-05
          • 2015-04-05
          • 2016-10-20
          • 2021-05-25
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2012-12-22
          相关资源
          最近更新 更多