关于 CSS/SVG 动画的后备 IE 不支持问题的最佳选择是什么？
最佳答案
保持选中@m_a答案，只是想将所有可用选项解释为供稍后阅读问题并寻找答案的人的后备。
在列出当前可用的所有选项之前，查看http://caniuse.com/#search=svg将看到 IE9+ 中对 SVG 的基本支持，但存在此问题
IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround.
所以如果你想回退 IE9+，那么你只需继续使用 SVG，但对于 IE8 及以下 SVG 文件不是一个选择。
此外，了解术语“Sprite Animation“(1) 也很重要，它基本上代表了一个基于步骤的动画，以几分之一秒的速度在每个步骤中显示新幻灯片或图像，对于流畅的动画，每秒 20 多张幻灯片更好，所以对人的眼睛不要有古怪。
1. CSS3 动画和过渡:
CSS3 动画和过渡以及transform 属性可用于应用于除SVG 元素之外的DOM 元素的简单和基本动画，但在IE9 及更低版本中不受支持。除了动画animated CSS properties之外，还可以通过使用
steps()来创建带有 CSS 动画的“ Sprite 动画”，例如CSS sprite animation示例中的overflow:hidden。2. JavaScript
我在 2005 年和 2006 年看到过非常复杂的 javascript 动画，并且有一个网站的所有者制作了两个完全相同的网站版本，一个完全使用 Flash，另一个完全使用 javascript - 虽然有点古怪 - 这是一个非常基本的和simple pure javascript。
使用 javascript -pure 或 jQuery(2)- 您可以更改一般的 CSS 属性，但主要用于简单动画，您将使用定位、颜色更改和不透明度等属性。
除了上面实现“ Sprite 动画”也是可能的，就像在these two examples中一样，我只是模仿上面CSS部分中的“ Sprite 动画”示例，首先应用于背景位置属性，其次应用于带有其的“img”标签具有
.png的父元素。同样，图像是@font-face，但如果您正在寻找仅适用于 IE9+ 的后备方案，您可以以相同的方式使用 SVG。还有其他 JS 库(3)可以使用:
3. 闪:
Flash(6) 近十年来一直被用作网页设计师创建跨浏览器动画的最佳选择，但由于呈现 CSS3 动画和 javascript 的革命以及自 2012 年左右停止支持 Flash 的手持设备而逐渐被放弃。
Flash 创建基于矢量的图形和基于关键帧的动画，以及将字体作为矢量嵌入的能力，在RaphaelJS之前，verdana、tahoma 和 times new roman 是网络的默认字体，以拥有矢量图形，您可以使用绘图程序内的工具或导入 Adobe Illustrator
.ae文件。您可以使用 Flash 作为 IE 的绝佳后备，因为它长期以来一直受到支持，并且它可以像 SVG 一样生成可缩放的矢量图形并提供补间，但它具有脚本语言 (7)，除非您通常不需要它如果您想向用户提供交互，也 - 据我所知 - 您无法使用 javascript 访问其结构。
同样出于演示目的，我还创建了这个Adobe Edge，它使用与 CSS 部分相同的“ Sprite 动画”想法。还创建了这个
</body> 。更新1:
根据 OP 的评论，对于内联SVG，当 DOM 准备就绪时 - 将 javascript 放在关闭
.svg标记之前 - 您可以执行以下操作之一:.png为对应的<!--[if IE]> stuff here <![endif]-->。 repSVG.js，用于在较旧的IE 版本中工作，但在IE10+ 上不起作用。所以你可以有这个:<!--[if lt IE 9]>
<script src="repSVG.js"></script>
<![endif]-->
这基本上意味着，如果 IE 小于 9 - 因此和字母 - 加载
replaceSVG()，其中将只包含替换和fix.css功能，.svg功能，对于 SVG 作为背景，就像你在做一个“ Sprite 动画”一样，创建另一个css文件，说
.png，其中包含所有具有“的CSS规则的相同命名” 104567914”背景，但用style.css图像代替，例如:在你
fix.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;
}
在
head中，您有:.foo { background:url(foo.png); }
.bar { background:url(bar.png); }
然后在页面的
fix.css部分执行以下操作之一: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]-->
head部分再次加载style.css。 请注意，您需要确保在加载
fix.css后具有您从上面选择的方法，以便当您加载background-image时它将覆盖“1045”的6个属性 style.css 。(*) 勾选Demo Fiddle。
更新2:
感谢Demo Fiddle提到带有polyfill的Previous Fiddle(10)，SMIL是SVG动画的一个很好的选择，但我不认为它是一个选择的原因是因为CSS-Tricks: Using SVG，IE依赖于它的VML，这就是为什么我认为它不适合 OP。
再次感谢@kaiido，我不知道这个SMIL是:
SMIL implementation written in ECMAScript ... It is primarily targeted to SVG animations... FakeSmile makes declarative animations work in IE too.
但是，我不确定此修复程序是否适用于来自IE never adopted it的新版本的 chrome:
Chrome 45 deprecated SMIL in favor of CSS animations and Web animations.
同样来自@kaiido
Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it's features.
(1). fakesmile
(2).与纯 javascript 动画、GSAP 或 Createjs 相比，jQuery 动画速度较慢。
(3).我已经看到了 Greensock、EaselJS 和 Snap.svg 的作用，但不是用于复杂的动画，尽管只是类似于 CSS3 动画的简单事物。
(4). MDN是 Microsoft 使用的基于 XML 的标记，在 IE5 - IE8 中受支持，但自 IE9 以来已弃用。 MS Office 2000 及更高版本也支持它。
(5). CSS-Tricks
(6).除了闪存之外，还有其他软件用于创建
.swf闪存文件，但除了Examples of spritesheet images提供了良好的功能水平外，它们中的大多数都没有提供丰富的功能。(7). Vector Markup Language (VML)是 Flash 中使用的脚本语言，它是类似于 javascript 的 ECMAScript 语法。
(8).使用特征检测比浏览器检测要好，因为假设有人使用 IE 以外的旧浏览器，例如 Safari5 或 Opera12，那么Adobe Edge showcase examples.不会修复它，因为它检测 IE 或不检测 IE，如果浏览器支持 SVG 或不支持。
(9).如果您在 IE8 及以下的任何浏览器中打开 fiddle ，它将显示 SVG，否则将显示 PNG，为了进行实验，将
IEversion < 9更改为IEversion < 14，您将看到这会影响此时所有 IE 现有的 IE邮政。请注意，万一后来微软决定发布一个支持带有 CSS 的 SVG 动画的 IE 版本，大概是 IE16，你可以为此设置另一个条件，比如SWiSH Max。(10). SMIL 代表同步多媒体集成语言，它有一个基于 XML 的语法，就像 SVG，ActionScript
关于css - 带有 css 的 Svg 动画 - 后备 IE，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34548654/