浏览器中SVG SMIL(动画)支持的级别

时间:2010-01-26 07:25:50

标签: svg

有没有人知道流行浏览器中SVG SMIL动画支持的当前状态?看起来Safari,Chrome和Opera都支持它。 Firefox在他们的开发页面中添加了关于SMIL支持的混乱报告,但是从v3.6开始我没有看到它:

https://bugzilla.mozilla.org/show_bug.cgi?id=216462

我忽略了IE,因为他们根本不支持SVG,而且可能永远不会,更不用说SMIL了。

另一件事 - 只是在Safari,Chrome和Opera之间比较这个测试页面:

http://srufaculty.sru.edu/david.dailey/svg/ovaling.svg

看起来Opera是唯一正确渲染它的人。难道我们不应该使用SMIL - 在所有浏览器中看起来都是半生不熟的(遗憾的是)?爆炸。

由于

6 个答案:

答案 0 :(得分:4)

http://www.codedread.com/svg-support.php进行了粗略的比较,并在Firefox 3.7版本中提到了SMIL。 关于IE,也许周三会改变一切,请参阅:live.visitmix.com/MIX10/Sessions/EX30

答案 1 :(得分:3)

Gecko的局限性是:

  • no< animateColor> - 没有计划
  • 没有挂机时间 - 没有计划
  • 变换列表的动画效率低下/不完整 - 应该在2011年12月左右修复
  • 过度使用CPU - 应在2011年12月左右提供一些改进

除此之外,我怀疑Gecko是主要浏览器中最符合规范的。 (特别是尝试与其他浏览器进行以下一些测试:http://mxr.mozilla.org/mozilla-central/source/layout/reftests/svg/smil/syncbase/

确实触发DOM事件并且总是(事实上,这是性能降低的原因之一)。但是,根据SMIL规范的要求,在搜索期间不会触发DOM事件。

与其他浏览器不同,它完全支持同步基准时间的动画夹心优先级,它为冻结动画和其他浏览器不支持的许多其他区域提供了正确的行为。

答案 2 :(得分:2)

http://caniuse.com/svg-smil

上有当前浏览器支持的最新概述

目前(21-okt-2012),除了IE9之外,所有主流桌面和移动浏览器至少部分支持svg-smil。

答案 3 :(得分:1)

Firefox 3.6中根本没有SMIL。 IE 9会做SVG,但它不会做SMIL。微软认为,在添加SMIL之前需要解决一些规范问题 - 在某种程度上,他们是正确的,IMO。 SMIL如何与其他动画交互是目前尚未解决的问题。

我刚刚在Linux上的Firefox 4中再次看了那个ovaling.svg演示(大致处于beta 2阶段)。它确实耗尽了我的CPU到77%,而Opera只使用了44%。换句话说,Opera 10.60只使用了我的两个CPU内核之一,Firefox使用了一个半。 Firefox中的动画非常流畅,但在Opera中确实有点卡顿。

在运行Linux的Thinkpad z61p上,我认为Firefox没有任何GPU加速(但是),但是当我开始使用时,我认为CPU负载会少很多。

Chrome 5惨遭失败。动画根本不会以任何真正有用的方式运行。

答案 4 :(得分:0)

在我非常短暂的经历中,Opera的支持是最完整和正确的(我玩过不同类型的动画时序和行为,并没有注意到任何错误。当动画开始/重复时,Opera是唯一一个触发DOM事件的人/结束)。

Gecko没问题,虽然它没有触发事件,并且误解了一些更复杂的动画。

WebKit是最糟糕的。动画必须同时包含fromto,否则很容易在添加/累积动画中找到错误(动画状态未正确重置或重置为错误状态)。从DOM中删除动画节点不会重置动画元素的位置。它似乎过度简化了动画状态的跟踪。我设法让Mobile Safari崩溃了。

动画速度 - 至少在台式机操作系统X上 - 似乎属于同一个联盟,尽管Opera中的动画似乎不像其他动画那么流畅。

答案 5 :(得分:0)

目前,我的回答非常明确(我只是考虑过这三个问题):

  1. 火狐
  2. Opera是目前唯一能够处理我游戏的浏览器。另外两个似乎缺乏对我的非常简单的动画和dom操纵动画的非常基本的支持。但是,我还没有花费超过一个小时的时间进行跨浏览器兼容性工作。

    我正在进行一种概念验证,仅用于在游戏中使用SVG 1.1 Full和SMIL动画(根本没有js动画)。到目前为止,我在Opera中成功测试的是:

    • 沿着具有二次和三次贝塞尔曲线的路径运动(以及's'和't'元素的延续)
    • 在动作期间更改路径
    • 使用SVGSVGElement.getIntersectionList样本沿路径进行碰撞检测和“雷达视觉”
    • 缩放并平移代表游戏世界的g元素
    • 检测演员的某些图形元素上的命中
    • 动态速度控制