带有 css 的 Svg 动画 - 回退 IE

Posted 2023-03-06

【中文标题】带有 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”也很重要⁽¹⁾，它基本上表示基于步骤的动画，在每一步中以秒的几分之一显示新幻灯片或图像，例如流畅的动画每秒 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⁽²⁾- 您可以更改一般的 CSS 属性，但主要是对于简单的动画，您将使用定位、颜色更改和不透明度。

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

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

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⁽⁴⁾ 作为 DOM 对象，它可以生成可缩放的矢量。

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

---

3。 闪光：

Flash⁽⁶⁾ 近十年来一直是网页设计师创建跨浏览器动画的最佳选择，但由于呈现 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 ⁽⁸⁾ 检测浏览器的个别功能 -并非所有浏览器 IE 仅- 检测浏览器是否支持SVG features - 在链接中我包含“inlinesvg”、“svgclippaths”和“svgfilters”功能，您可以添加或删除功能 - 然后点击构建并下载它，检查the documentation 以了解如何使用它。

检测浏览器是否是IE，我修改了这个condepen并制作了这个Demo Fiddle ⁽⁹⁾来做一个条件，以便如果它是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.css 的 background-image 属性。

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

---

更新 2：

感谢 @kaiido 提到 SMIL⁽¹⁰⁾ 使用 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 了解如何替换它的一些功能。

---

⁽¹⁾。 Examples of spritesheet images

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

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

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

⁽⁵⁾。 Adobe Edge showcase examples.

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

⁽⁷⁾。 ActionScript 是 Fl​​ash 中使用的脚本语言，它是类似 javascript 的 ECMAScript 语法。

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

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

⁽¹⁰⁾。 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 。如果是这样，简码是什么？谢谢你分配