SVG动画与CSS - IE的备用方案

Question

如何解决CSS/SVG动画在IE浏览器中不支持的问题？最佳方案是什么？

- Yaky Refael

---

javascript:: GreenSock - Snap.svg - Raphael.js - 以及 jQuery，或者使用 SVG 帧的 CSS 精灵表。 - Mi-Creativity

@Mi-Creativity 谢谢！ - Yaky Refael

Answer 1

保持@m_a的答案选中，只是想解释一下所有可用选项作为后备，以便于日后阅读此问题并寻找答案的人们。

在列出当前所有选项之前，先看一下http://caniuse.com/#search=svg，可以看到IE9+对SVG的支持基本上是有问题的。

IE9-11桌面和移动版不会正确缩放SVG文件。添加高度、宽度、viewBox和CSS规则似乎是最好的解决方法。

因此，如果你想要回退到IE9+，那么你仍然需要使用SVG，但是对于IE8及以下版本，SVG文件就不是一个选择了。

同时，了解术语 "精灵动画" ⁽¹⁾ 很重要，它基本上表示一种基于步骤的动画，每一步显示一个新的幻灯片或图像，在每一秒的分数中进行，对于流畅的动画，20+张幻灯片/秒更好，以避免对人眼产生怪异的影响。

1. CSS3 动画和过渡：

CSS3 动画、过渡和 transform 属性可用于应用于 DOM 元素而非 SVG 元素的简单基础动画，但不支持 IE9 及以下版本。除了可以使 CSS 属性动画 进行动画化之外，还可以使用 CSS 动画创建 "精灵动画"，通过使用 steps()，就像在这个 CSS 精灵动画 示例中所示。

---

2. JavaScript

在2005年和2006年，我曾经看到非常复杂的JavaScript动画，有一个网站的所有者制作了两个完全相同的版本的网站，一个完全使用Flash，另一个完全使用JavaScript -尽管有些古怪- 这是一个非常基本和 简单的纯JavaScript。

使用JavaScript -纯JavaScript或jQuery⁽²⁾- 通常可以更改CSS属性，但对于简单的动画，您将使用像定位、颜色变化和不透明度等属性。

除上述内容外，实现“精灵动画”也是可能的，就像这两个示例一样，我刚刚模仿了CSS部分中应用于background position属性的“精灵动画”示例，并在具有overflow:hidden的父元素的'img'标记上应用了第二个示例。再次说明，图像是.png，但如果您只想要IE9+的回退，则可以以同样的方式使用SVG。

还有其他JS库⁽³⁾可以使用:

• Greensock 和它的 GSAP API 是一个不错的选择，因为它快速并提供了向 IE6 的回退，也可以与其他 js 库以及 CSS 和画布一起使用，我也喜欢 morphSVG 的工作方式。
• CreateJS [ Easeljs 和 TweenJS ] 与 HTML 画布一起使用 -是的，画布在 IE8 及以下版本中不受支持，但有一个IE8的解决方法 - 并且它可以从 Flash 文件中导出。

• Snap.svg 看起来简单而美观，与 SVG 一起使用，这意味着只支持 IE9+，因此如果您想要 IE8 及以下版本的回退，则无法使用此选项。

• RaphaelJS 支持非常旧的浏览器，包括 IE6+，并且它生成可缩放的矢量，因为使用 SVG W3C 和 VML⁽⁴⁾ 作为 DOM 对象。

• Adobe Edge ⁽⁵⁾ 让您使用界面创建 HTML5 动画，但我认为它会产生大量的 javascript 文件。此外，您可以使用某些插件从 Edge 导出到 Snap.svg。

---

3. Flash:

Flash⁽⁶⁾曾经是网页设计师创建跨浏览器动画的最佳选择，但随着CSS3动画和JavaScript的革命以及手持设备不再支持Flash，逐渐被弃用，大约在2012年左右。

Flash创建基于向量的图形和基于关键帧的动画，以及将字体作为向量嵌入。在Web默认字体Verdana、Tahoma和Times New Roman之前@font-face出现之时，这种能力非常有用。要使用向量图形，您可以使用程序内的绘图工具或导入Adobe Illustrator .ae 文件。

您可以将Flash用作Internet Explorer的后备方案，因为它自长时间以来就受到支持，而且它生成可缩放矢量图形，就像SVG一样，并提供了缓动效果，但它有自己的脚本语言⁽⁷⁾，除非您想向用户提供交互，否则大多数情况下您不需要使用它。此外，据我所知，您无法使用JavaScript访问其结构。

为了演示目的，我还创建了这个 Flash 示例 ，它使用了与CSS部分相同的"精灵动画"思想。同时还创建了这个矢量图形演示示例。

---

更新1：

根据原帖评论，对于内联 SVG，在DOM准备就绪时-将JavaScript放在 </body> 标签之前- 您可以执行以下操作之一：

• Use Modernizr ⁽⁸⁾ which detects individual features of the browser -all browser not IE only- to detect whether the browser supports SVG features - in the link I included "inlinesvg", "svgclippaths" and "svgfilters" features you can add or remove features - then hit build and download it, check the documentation to know how to use it.

• Detect if the browser is IE or not, I modified this condepen and made this Demo Fiddle ⁽⁹⁾ to make a condition so that if it is IE and Version < 9 it replaces all inline .svg with the corresponding .png.

• There is this hack <!--[if IE]> stuff here <![endif]-->, used to work in older IE version, but not on IE10+ it won't work. so you can have this:

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

这基本上意味着，如果IE低于9（因此是“lt”字母），则加载repSVG.js，其中仅包含替换和replaceSVG()函数，请查看Demo Fiddle。

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

在你的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 部分执行以下操作之一：

• Use Modernizr to load the fix.css in the head if the browser doesn't support SVG as backgrounds.

• Again you can use this easy thing:

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

• Use same logic in the Previous Fiddle to detect if browser is IE and version is less that a certain version, then load fix.css again in the head section.

请注意，您需要确保在加载style.css后选择上面的方法之后，以便在加载fix.css时覆盖style.css的background-image属性。

^(*) 请查看 CSS-Tricks：使用SVG。

---

更新2：

感谢@kaiido提到一个带有polyfill的SMIL⁽¹⁰⁾，SMIL是SVG动画的一个很好的选择，但我认为它不可行的原因是IE从未采用它，IE依赖于其VML，这就是为什么我认为它不适合OP的原因。

再次感谢@kaiido，我不知道这个fakesmile是什么：

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

然而，我不确定这个修复方法是否适用于新版本的Chrome，来自MDN的信息如下:

Chrome 45弃用SMIL，转而采用CSS动画和Web动画。

同时来自CSS-Tricks

2015年12月更新：在此更新时，SMIL似乎有点萎靡不振。Sarah Drasner 发布了一篇指南，介绍如何替换其中的一些功能。

---

⁽¹⁾. 精灵图示例图片的例子。

⁽²⁾. 与纯javascript动画、GSAP或Createjs相比，jQuery动画较慢。

⁽³⁾. 我看过Greensock、EaselJS和Snap.svg的使用，但仅用于简单的事情，类似于CSS3动画，而非复杂的动画。

⁽⁴⁾. 矢量标记语言（VML）是微软使用的基于XML的标记语言，在IE5-IE8中得到支持，但自IE9发布以来已被弃用。它也被支持在MS Office 2000及以后的版本中。

⁽⁵⁾. Adobe Edge展示示例。

⁽⁶⁾. 除了Flash之外，还有其他软件用于创建.swf闪存文件，但它们大多数不提供丰富的功能，除了SWiSH Max，它提供了良好的功能水平。

⁽⁷⁾. ActionScript是Flash中使用的脚本语言，它采用ECMAScript语法，类似于JavaScript。

⁽⁸⁾. 使用功能检测比浏览器检测更好，因为假设某人使用的是旧版浏览器而不是IE，例如Safari5或Opera12，则this fiddle将无法修复它，因为它只能检测IE是否存在，而不能检测浏览器是否支持SVG。

⁽⁹⁾. 如果您在IE8及以下的任何浏览器中打开fiddle，它将显示SVG，否则它将显示PNG。要进行实验，请将IEversion < 9更改为IEversion < 14，您将看到这会影响此帖子发布时所有现有IE版本。请注意，如果微软以后决定发布支持CSS SVG动画的IE版本（假设为IE16），则可以为其创建另一个条件，例如demo fiddle。

⁽¹⁰⁾. SMIL代表同步多媒体集成语言，它具有与SVG相同的基于XML的语法，使用SMIL进行SVG动画。

- Mi-Creativity

---

@Mi-Creativy：非常感谢您详细的回答。是否有任何选项可以使用我的SVG动画CSS，在IE中仅显示任何图像而不是SVG元素？ - Yaky Refael

@YakyRefael，欢迎您。"而且只在IE中显示任何图像而不是svg元素"这本身就是一个完整的故事，请查看我更新的答案中的更新部分。 - Mi-Creativity

非常详细的回答，但你甚至没有谈到SMIL？？？我的意思是，如果你想做SVG动画，规范中有一个完整的部分介绍它。这比编码要容易得多。IE从未支持过SMIL，但使用fakeSmile polyfill，你可以做比CSS更多的事情，而CSS真的非常有限。 - Kaiido

我不会选择CSS，我更喜欢使用GSAP或snap.svg，如果需要的话可以使用flash作为备选方案。我会更新我的答案并包含你的建议，感谢告诉我一些新的东西。 - Mi-Creativity

SMIL是否适用于Chrome 45+，考虑到fakesmile？因为“Chrome 45已弃用SMIL，转而使用CSS动画和Web动画”。 - Mi-Creativity

Answer 2

IE（至少在IE11之前，这是最常用的版本）不支持CSS3 SVG动画。请参见：CSS3动画无法工作。

Javascript可用，但会影响性能，而且肯定会花费时间和灵活性成本。动画GIF可以支持一些简单且自包含的内容。上面链接中的第一个答案有更多相关信息：https://dev59.com/S2Af5IYBdhLWcg3wwk-5#24477055

- Mike Askew

---

动画 GIF 不是可缩放矢量图形，因此不能作为选项。 - Mi-Creativity

如果可扩展性是必须的，那就是真的。 - Mike Askew

@Mi-Creativity 嗯，这只是一个备选方案 - 不是完美的替代品。 - nicholaswmin

@NicholasKyriakides，OP正在寻找“SVG动画”的备选方案，而不是“SVG”的备选方案。 - Mi-Creativity

@Mi-Creativity，你有没有其他像gif回退这样的想法？如果有的话，短代码是什么？非常感谢。 - Yaky Refael