正文 

当前位置： 首页 > 知识 >

带有 css 的 Svg 动画 - 回退 IE

     2023-03-06     52

关键词：

【中文标题】带有 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.css 的 background-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; 9 为 IEversion &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 。如果是这样，简码是什么？谢谢你分配

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

...编写了精美的加载动画。我的问题是InternetExplorer10不支持带有attributeName参数的SVG&lt;anim 查看详情

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

】带有变换的css关键帧动画不适用于SVG【英文标题】：csskeyframesanimationwithtransformnotworkingonSVG【发布时间】：2016-02-0709:51:36【问题描述】：当我尝试使用CSS关键帧动画为SVG文本设置动画时，它不会为变换属性设置动画。动画填充... 查看详情

Edge 和 IE 上的动画 SVG（使用 CSS）是不是有解决方法？

】Edge和IE上的动画SVG（使用CSS）是不是有解决方法？【英文标题】：IsthereaworkaroundforanimatedSVGs(usingCSS)onEdgeandIE?Edge和IE上的动画SVG（使用CSS）是否有解决方法？【发布时间】：2020-05-3117:57:59【问题描述】：我有一个SVG动画，它不... 查看详情

带有 CSS 过渡的 SVG 过滤器

】带有CSS过渡的SVG过滤器【英文标题】：SVGfilterwithCSStransitions【发布时间】：2017-12-2203:23:01【问题描述】：我正在使用css动画进行svg过滤。我用<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><defs><filterid="goo"><feGaussianBluri... 查看详情

带有 viewBox 和宽度的 SVG 在 IE 中无法正确缩放高度

】带有viewBox和宽度的SVG在IE中无法正确缩放高度【英文标题】：SVGwithviewBoxandwidthisnotscalingheightcorrectlyinIE【发布时间】：2014-12-0322:44:41【问题描述】：我正在尝试使用viewBox属性构建内联SVG，但没有明确的宽度或高度属性。我使用... 查看详情

滑块的 CSS SVG 动画

...svgcss动画的模型图像，并希望在css中实现它。动画由一个带有当前数值的气球组成，应该从左到右或从右到左放大和缩小。目前我处于起点，有点迷失如何解决这个问题。我的主要问题是如何放大或缩小这个气球，所以前面的气... 查看详情

SVG 元素的 CSS 动画在 Chrome 中不起作用

】SVG元素的CSS动画在Chrome中不起作用【英文标题】：CSSanimationofSVGelementsnotworkinginChrome【发布时间】：2016-02-0611:59:18【问题描述】：我正在创建一组SVG图标，并且我想使用CSS为一些元素设置动画。示例代码适用于IE、Firefox和S̵a̵f... 查看详情

带有 SVG.js 的蜜蜂 SVG 动画

】带有SVG.js的蜜蜂SVG动画【英文标题】：BeeSVGanimationwithSVG.js【发布时间】：2021-05-2315:28:48【问题描述】：正如您在codepen中看到的，在SVG画布中有一个简单的BeeSVG。理想情况下，我想实现一个蜜蜂在画布周围嗡嗡作响的动画，但... 查看详情

为啥带有 SVG 的 CSS 剪辑路径在 Safari 中不起作用？

】为啥带有SVG的CSS剪辑路径在Safari中不起作用？【英文标题】：Whydoesn\'tCSSclip-pathwithSVGworkinSafari?为什么带有SVG的CSS剪辑路径在Safari中不起作用？【发布时间】：2017-06-1103:47:21【问题描述】：我在标头上有一个内嵌svg和一个背景... 查看详情

IE 11 SVG 动画平滑度

】IE11SVG动画平滑度【英文标题】：IE11SVGanimationsmoothness【发布时间】：2015-09-2600:09:09【问题描述】：我在IE11上的SVG平滑度存在很大问题（在Chrome上完美运行）。它应该像实时时间线一样工作。SVG元素动态增加它的高度，事件显... 查看详情

如何在不使用 js 或 css 的情况下创建 svg 动画 [关闭]

...】：不知道如何编码的设计师如何创建svg动画？尝试使用带有AnimateSVGExporter的Adob​​eAnimateCC，但是当.fla文件导出为svg时，它会丢失所有或大部分动画。【问题讨论】：你可 查看详情

SVG 动画不适用于 IE11

】SVG动画不适用于IE11【英文标题】：SVGanimationisnotworkingonIE11【发布时间】：2016-02-2202:12:33【问题描述】：我有一个非常简单的加载动画，可以在Firefox和Chrome上完美运行，但在IE11中它没有显示SVG图。以下是完整示例：JSFiddlesampleS... 查看详情

SVG 动画不适用于 IE11

】SVG动画不适用于IE11【英文标题】：SVGanimationisnotworkingonIE11【发布时间】：2017-01-2103:16:24【问题描述】：我有一个非常简单的加载动画，可以在Firefox和Chrome上完美运行，但在IE11中它没有显示SVG图。以下是完整示例：JSFiddlesampleS... 查看详情

绘制 svg 虚线的动画

...4-07-2404:34:20【问题描述】：我正在尝试使用svg和css动画为带有虚线的箭头设置动画，类似于------->，但具有水平和垂直路径。我尝试了几种不同的方法，动画高度和宽度，使用底部和顶部，但每种方式都有一些看起来不太好或... 查看详情

带有 d: 路径的 Svg 动画

】带有d:路径的Svg动画【英文标题】：Svganimationwithd:path【发布时间】：2022-01-1406:21:21【问题描述】：我正在尝试按照thiscodepen使用path属性为我的svg设置动画，但我的动画路径并不顺畅，并且有一些奇怪的步骤。path值是否有问题... 查看详情

在 IE9+ 中使用 CSS3 动画

】在IE9+中使用CSS3动画【英文标题】：UsingCSS3AnimationsinIE9+【发布时间】：2012-02-2200:45:45【问题描述】：我今天已经尝试让这些css3动画在IE9中工作几个小时，但我被难住了！我尝试实现一些JavaScript回退，但我的知识非常有限，因... 查看详情

SVG 旋转动画在 IE 和 FF 中失败

】SVG旋转动画在IE和FF中失败【英文标题】：SVGRotationAnimationFailinginIEandFF【发布时间】：2015-12-0810:44:33【问题描述】：我正在使用SVG制作一个简单的加载微调器元素。它在Chrome中运行良好，但在其他浏览器中却不行。在IE中，动画... 查看详情

SVG 动画 - 来自中心的 SVG 的 CSS 悬停动画

】SVG动画-来自中心的SVG的CSS悬停动画【英文标题】：SVGAnimation-CSSHoverAnimationForSVGFromTheCenter【发布时间】：2021-02-0202:50:03【问题描述】：我在GSAP中做过这个效果这里是Codepen作为参考：https://codepen.io/whitelionx/full/vYGQqBZconstsvgs=documen... 查看详情