带有 css 的 Svg 动画 - 回退 IE

Posted

技术标签:

【中文标题】带有 css 的 Svg 动画 - 回退 IE【英文标题】:Svg animation with css - fallbacks IE 【发布时间】:2016-04-05 13:22:23 【问题描述】:

在 CSS/SVG 动画上回退 IE 不支持问题的最佳选择是什么?

【问题讨论】:

javascript:: GreenSock - Snap.svg - Raphael.js - 和 jQuery,或具有 SVG 框架的 CSS spritesheets @Mi-Creativity 谢谢! 【参考方案1】:

检查@m_a 答案,只是想解释所有可用选项,作为人们稍后阅读问题并寻找答案的后备。

在列出当前可用的所有选项之前,请查看 http://caniuse.com/#search=svg 会看到 basic IE9+ 中支持 SVG,但存在此问题

IE9-11 桌面和移动设备无法正确缩放 SVG 文件。 Adding height, width, viewBox, and CSS rules 似乎是最好的解决方法。

所以如果您想回退 IE9+,那么您只需继续使用 SVG,但对于 IE8 及以下版本,SVG 文件不是一个选项。

了解术语“Sprite Animation”也很重要(1),它基本上表示基于步骤的动画,在每一步中以秒的几分之一显示新幻灯片或图像,例如流畅的动画每秒 20 多张幻灯片更好,以免对人眼产生古怪。

1。 CSS3 动画和过渡:

CSS3 动画和过渡以及 transform 属性可用于应用于 SVG 元素以外的 DOM 元素的简单和基本动画,但在 IE9 及以下版本中不支持。除了为animated CSS properties 设置动画外,还可以使用steps() 来创建带有CSS 动画的“sprite 动画”,就像在这个CSS sprite animation 示例中一样。


2。 JavaScript

我在 2005 年和 2006 年看到过非常复杂的 javascript 动画,并且有一个网站的所有者制作了两个相同版本的网站,一个完全用 Flash,另一个完全用 javascript -虽然有点古怪-这是一个非常基本的simple pure javascript。

使用 javascript -pure 或 jQuery(2)- 您可以更改一般的 CSS 属性,但主要是对于简单的动画,您将使用定位、颜色更改和不透明度。

除了上述实现“精灵动画”之外,也可以像在these two examples 中一样,我只是模仿上面CSS部分中的“精灵动画”示例首先应用于背景位置属性第二个在“img”标签上,其父元素具有overflow:hidden。同样,图像是.png,但如果您正在寻找仅适用于 IE9+ 的后备方案,则可以以同样的方式使用 SVG。

还有其他可以使用的JS库(3)

Greensock 和它的 GSAP API 是一个不错的选择,因为它速度快并且可以回退到 IE6,也可以与其他 js 库以及 CSS 和 canvas 一起使用,我也喜欢 morphSVG 的工作方式。 CreateJS [Easeljs 和 TweenJS ] 适用于 html 画布 -是的,右边的画布不是 supported in IE8 及以下,有一个 workaround for IE8 thought- 它提供从 Flash 文件导出。

Snap.svg 看起来简单漂亮,并且可以与 SVG 一起使用,这意味着仅支持 IE9+,因此如果您想要 IE8 及以下版本的后备,则不能使用这个。

RaphaelJS 支持非常旧的浏览器,包括 IE6+,并且由于使用 SVG W3C 和 VML(4) 作为 DOM 对象,它可以生成可缩放的矢量。

Adobe Edge (5) 可让您创建带有界面的 HTML5 动画,但我认为它会生成大量 javascript 文件。你也可以使用我相信的一些插件从 Edge 导出到 Snap.svg。


3。 闪光:

Flash(6) 近十年来一直是网页设计师创建跨浏览器动画的最佳选择,但由于呈现 CSS3 动画和 javascript 的革命以及自 2012 年左右起停止支持 Flash 的手持设备。

Flash 创建基于矢量的图形和基于关键帧的动画,以及将字体作为矢量嵌入的能力,在 @font-face 之前,verdana、tahoma 和 times new roman 是网络的默认字体,您可以使用矢量图形使用程序内的绘图工具或导入 Adob​​e Illustrator .ae 文件。

您可以将 Flash 用作 IE 的绝佳后备方案,因为它长期以来一直受到支持,并且它可以像 SVG 一样生成可缩放的矢量图形并提供补间,但它具有脚本语言(7) sup> 除非您想向用户提供交互,否则您通常不需要它,而且 -据我所知-您无法使用 javascript 访问其结构。

再次出于演示目的,我还创建了这个flash example,它使用了与 CSS 部分相同的“sprite 动画”理念。还创建了这个vector graphics demo example


更新 1:

根据 OP 的评论,对于 inline SVG,当 DOM 准备好时 -在关闭之前放置 javascript </body> tag- 您可以执行以下操作之一:

使用Modernizr (8) 检测浏览器的个别功能 -并非所有浏览器 IE - 检测浏览器是否支持SVG features - 在链接中我包含“inlinesvg”、“svgclippaths”和“svgfilters”功能,您可以添加或删除功能 - 然后点击构建并下载它,检查the documentation 以了解如何使用它。

检测浏览器是否是IE,我修改了这个condepen并制作了这个Demo Fiddle (9)来做一个条件,以便如果它是IE和版本 它将所有内联 .svg 替换为相应的 .png

有这个 hack <!--[if IE]> stuff here <![endif]-->,以前可以在旧版 IE 上工作,但在 IE10+ 上就不行了。所以你可以拥有这个:

<!--[if lt IE 9]>
    <script src="repSVG.js"></script>
<![endif]-->

这基本上意味着,如果 IE 小于 9 -因此 lt 字母 - 加载 repSVG.js 将仅包含替换和replaceSVG() 函数,检查这个Demo Fiddle

对于作为 背景 的 SVG,例如,如果您正在制作“精灵动画”,请创建另一个 css 文件,例如 fix.css ,其中包含所有具有 .svg 背景但使用 .png 图像的 CSS 规则的相同命名,例如:

在你style.css

.foo 
  width:300px;
  height:120px;
  background:url(foo.svg);
  background-size:300px 120px;

.bar 
  width:200px;
  height:50px;
  background:url(bar.svg);
  background-size:200px 50px;

fix.css 你有:

.foo  background:url(foo.png); 
.bar  background:url(bar.png); 

然后在页面的head 部分执行以下操作之一:

如果浏览器支持 SVG 作为背景,请使用 Modernizr 加载 head 中的 fix.css

李>

你可以再次使用这个简单的东西:

<link rel="stylesheet" type="text/css" href="main-style.css">
<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="fix.css">
<![endif]-->

Previous Fiddle中使用相同的逻辑来检测浏览器是否为IE并且版本低于某个版本,然后在head部分再次加载fix.css

请注意,您需要确保在加载 style.css 之后 使用您从上面选择的方法,以便在加载 fix.css 它将覆盖 style.cssbackground-image 属性。

(*)检查CSS-Tricks: Using SVG。


更新 2:

感谢 @kaiido 提到 SMIL(10) 使用 polyfill,SMIL 是 SVG 动画的绝佳选择,但我认为它不是一个选项的原因是IE never adopted it,IE 依赖它的 VML,这就是为什么我认为它不适合 OP。

再次感谢@kaiido,我不知道这个fakesmile是:

用 ECMAScript 编写的 SMIL 实现...它主要针对 SVG 动画...FakeSmile 使声明式动画也可以在 IE 中工作。

但是,我不确定此修复是否适用于新版本的 chrome,来自 MDN:

Chrome 45 弃用了 SMIL,取而代之的是 CSS 动画和 Web 动画。

同样来自CSS-Tricks

2015 年 12 月更新:在此更新时,SMIL 似乎快要死了。 Sarah Drasner has a guide 了解如何替换它的一些功能。


(1)。 Examples of spritesheet images

(2)。与纯 javascript 动画、GSAP 或 Createjs 相比,jQuery 动画速度较慢。

(3)。我已经看到了 Greensock、EaselJS 和 Snap.svg 的实际应用,但不适用于复杂动画,尽管只是类似于 CSS3 动画的简单事物。

(4)。 Vector Markup Language (VML) 是 Microsoft 使用的基于 XML 的标记,在 IE5 - IE8 中受支持,但自 IE9 版本以来已被弃用。 MS Office 2000 及更高版本也支持它。

(5)。 Adobe Edge showcase examples.

(6)。除了 flash 之外,还有其他用于创建 .swf flash 文件的软件,但大多数软件不提供丰富的功能,除了 SWiSH Max 提供了很好的功能。

(7)。 ActionScript 是 Fl​​ash 中使用的脚本语言,它是类似 javascript 的 ECMAScript 语法。

(8)。使用功能检测比浏览器检测更好,因为假设有人使用除 IE 之外的旧浏览器,例如 Safari5 或 Opera12,那么this fiddle 将不会修复它,因为它检测到 IE 或不仅如果浏览器支持 SVG 不检测。

(9)。如果您在 IE8 以外的任何浏览器中打开小提琴,它会显示 SVG,否则会显示 PNG,尝试将其更改 IEversion &lt; 9IEversion &lt; 14,您会看到这会影响所有 IE 现有的 IE邮政。请注意,如果微软后来决定发布支持 SVG 动画的 IE 版本,大概是 IE16,您可以为此设置另一个条件,例如 demo fiddle

(10)。 SMIL 代表 Synchronized Multimedia Integration Language,它具有类似于 SVG 的基于 XML 的语法,SVG animation using SMIL

【讨论】:

@Mi-Creativy :感谢您的详细回答。是否有任何选项可以使用我的 svg 动画 css,并且只在 IE 中显示任何图像而不是 svg 元素。 @YakyRefael,欢迎您。“只在 IE 中显示任何图像而不是 svg 元素”这本身就是一个完整的故事,请查看 更新 我更新的答案中的部分。 真的很详细的回答,但是你连SMIL都不说???我的意思是,如果你想做 SVG 动画,规范中有一个完整的部分。比编码更容易实现的方式。 IE 从不支持 SMIL,但使用 fakeSmile polyfill,你可以做的比使用 CSS 多很多,CSS 确实非常有限。 @Kaiido,我从来没有听说过 fakeSmile,我只知道 SMIL 不能与 IE 一起使用,并且 OP 正在寻找 IE 的后备方案,所以不认为 SMIL 是一个选项。我道歉 @Mi-Creativity,太糟糕了,你从来没有听说过它,它可以在不支持它的浏览器中启用大多数 SMIL 动画(IE 是第一个目标)。所以 IMO,SMIL+fakeSmile 不仅仅是一种选择,它只是比 CSS 本身更好的方式。【参考方案2】:

IE(至少在 IE11 之前——这是最常用的版本)不支持 CSS3 SVG 动画。请参阅:CSS3 animation is not working。

Javascript 是可用的,但要以性能为代价,当然也要以时间和灵活性为代价。动画 GIF 可以支持一些简单且独立的东西。上面链接中的第一个答案对此有更多的了解:https://***.com/a/24477055/1864597

【讨论】:

不能选择动画 GIF,因为它不是可缩放矢量图形 如果可扩展性是必须的,那是真的。 @Mi-Creativity 嗯,这是一个后备 - 不是一个完美的选择 @NicholasKyriakides,OP 正在寻找“SVG Animation”而不是“SVG”后备的后备 @Mi-Creativity 你还有其他想法吗,比如 gif fallback 。如果是这样,简码是什么?谢谢你分配

以上是关于带有 css 的 Svg 动画 - 回退 IE的主要内容,如果未能解决你的问题,请参考以下文章

RGBA–IE回退

SVG 动画:使用 CSS3 媒体查询将 IE10 与其他现代浏览器隔离开来

Edge 和 IE 上的动画 SVG(使用 CSS)是不是有解决方法?

带有变换的css关键帧动画不适用于SVG

当 UIImage 改变时动画回退

动画和回退的 HTML 最佳实践