css - 带有 css 的 Svg 动画 - 后备 IE

Question

关于 CSS/SVG 动画的后备 IE 不支持问题的最佳选择是什么？

Answer 1

保持选中@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)可以使用:

Greensock 及其 GSAP API 是一个不错的选择，因为它速度快并提供回退到 IE6，也可以与其他 js 库以及 CSS 和 canvas 一起使用，我也喜欢morphSVG的工作方式.

CreateJS [ Easeljs 和 TweenJS ] 适用于 HTML Canvas - 是的，正确的 Canvas 不是 supported in IE8 and below ，有一个 “1045617915” 提供了“1045617915”的想法，“它提供了 Flash 导出”文件。

workaround for 看起来既简单又漂亮，可与 SVG 一起使用意味着仅支持 IE9+，因此如果您想要 IE8 及以下版本的后备，则不能使用这个。

IE8 支持非常老的浏览器，包括 IE6+，它产生可缩放的矢量，因为使用 SVG W3C 和 VML(4) 作为 DOM 对象。

Snap.svg (5) 让你用一个界面创建 HTML5 动画，但我认为它会产生很多 javascript 文件。你也可以使用一些我相信的插件从 Edge 导出到 Snap.svg。

3. 闪:

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

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

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

同样出于演示目的，我还创建了这个 Adobe Edge，它使用与 CSS 部分相同的“ Sprite 动画”想法。还创建了这个 </body> 。

更新1:

根据 OP 的评论，对于 内联SVG，当 DOM 准备就绪时 - 将 javascript 放在关闭 .svg标记之前 - 您可以执行以下操作之一:

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

检测浏览器是否是IE浏览器，我修改了这个SVG features并制作了这个the documentation(9)来做一个条件，如果它是IE并且版本<9，它替换所有内联的.png为对应的<!--[if IE]> stuff here <![endif]-->。

有这个hack 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部分执行以下操作之一:

如果浏览器不支持 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]-->

使用condepen中相同的逻辑来检测浏览器是否为IE并且版本低于某个版本，然后在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