SVG 动画不适用于 IE11

Posted 2023-03-06

【中文标题】SVG 动画不适用于 IE11

【英文标题】：SVG animation is not working on IE11

【发布时间】：2017-01-21 03:16:24

【问题描述】：

我有一个非常简单的加载动画，可以在 Firefox 和 Chrome 上完美运行，但在 IE11 中它没有显示 SVG 图。

以下是完整示例： JSFiddle sample

SVG：

<svg class="circular-loader" viewBox="25 25 50 50">
  <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke- stroke-miterlimit="10"/>
</svg>

动画是旋转，在 IE11 上运行，但 SVG 是圆形的，没有显示。

有什么想法吗？

我只是想不通 IE11 不支持什么。

【问题讨论】：

哪个版本的IE？

我在 explorer 11 上测试

您必须为在 IE 中看到的颜色定义 stroke 属性。但我认为您将不得不使用单独的 CSS 动画属性而不是速记 animation CSS 属性。你可以在这里看到：jsfiddle.net/z8w4vuau/50 .. 我如何为.loader-path circle 元素上的颜色添加stroke 属性并增加stroke-dasharray 所以你可以看到它在旋转，但IE 没有为你的@ 设置动画987654330@ 和stroke-dashoffset。因此，只需使用长格式 CSS 动画属性即可。

我的时间不多了.. 但是一旦您使用长格式 CSS 动画属性并将 stroke 属性添加到您的 circle 元素，这将使您成功一半：jsfiddle.net/z8w4vuau/50跨度>

【参考方案1】：

只有 Microsoft Edge 将支持 SVG CSS 过渡和动画。尤其是 stroke-dasharray。

请参阅 Microsoft 开发人员文档：

https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements

允许 CSS 过渡和动画应用于 SVG 元素。 无前缀版本：Microsoft Edge build 10240+

正如您在我的示例中看到的那样。由于circle 元素上没有stroke 属性，您没有看到加载程序旋转。

https://jsfiddle.net/z8w4vuau/50/

您现在可以看到它是如何旋转的。但是您必须检查浏览器是否为 IE 并调整您的 stroke-dasharray 使其变大。由于 IE11 及更低版本不支持使用 CSS 动画或过渡对 SVG stroke-dasharray 和 stroke-dashoffset 进行动画处理，除非它是 Microsoft Edge build 10240+。

但是，如果您需要跨浏览器解决方案来为 SVG 制作动画，尤其是 stroke-dasharray 和 stroke-dashoffset，那么请考虑使用像 GreenSock Animation Platform (GSAP) 这样的 JS 动画库。使用DrawSVGPlugin

https://greensock.com/drawSVG

【讨论】：

在 Edge (20.10240.16384.0) 中查看它根本不起作用。我从小提琴中删除了所有不需要的东西，这样更容易看到：jsfiddle.net/z8w4vuau/55

Microsoft 声明它支持 stroke-dasharray 上的 CSS Animations on reference for stroke-dasharray page msdn.microsoft.com/en-us/library/ff972274(v=vs.85).aspx .. 但它是 IE，因此 css 过渡和 css 动画会出现错误或无法工作的行为..可能是浏览器错误？但是您是否尝试过像 GreenSock GSAP DrawSVGPlugin 这样的 JS 解决方案？在 IE Edge 中查看此页面上的示例 .. greensock.com/drawSVG

我正在使用 JS-library-diet 可以这么说 :) 但我知道我可以使用 javascript 来做到这一点。但是，这并不重要，所以我只是在 IE/Edge 中检测并禁用这些动画，直到修复为止。

根据这个答案，我决定使用 Modernzr 的“no-smil”类来定位 IE11 上的 SVG 动画。这样我就可以选择一个静态图形并仍然使用相同的 SVG。

【参考方案2】：

IE11 支持 CSS3 动画，但不支持 SVG 元素的子节点。您可以为 SVG 节点本身设置动画，因此我的解决方案是将这些部分分解为单独的 SVG，并使用 CSS3 为它们设置动画。

https://codepen.io/getsetbro/full/Bxeyaw/

如果您添加元标记，即使 IE11 处于兼容模式，这也可以工作

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

【讨论】：

这很有趣，我越想越意识到它可能会解决我的问题而无需进行重大返工。

【参考方案3】：

对于遇到此问题的任何人，我有一个解决方法。

我有一个带有 ID 和 CSS 动画的完整 SVG，所有其他主要浏览器都可以完美运行。

我已将 SVG 插入 html，因此我可以使用 CSS 动画访问每个项目。

为此，您的 SVG 必须具有以下位置：

absolute; top: 0px; left: 0px, 

...在容器内.svgcontent（或任何你想叫它的名字）

脚本：

var IE = (navigator.userAgent.indexOf("Edge") > -1 || navigator.userAgent.indexOf("Trident/7.0") > -1) ? true : false;
objs = [ '#file1', '#file2','#file3','#file4','#file5','#file6','#file7','#file8','#file9','#file10','#file11', '#bottom' ];
if ( IE )
    objs.forEach(function (item) 
        item = $(item);
        id = item.attr('id');
        svgcontent = item.closest('.svgcontent')
        svg = item.closest('svg');
        svgattrs = ' width='+svg.attr('width')+' height='+svg.attr('height')+' '
        html = '<svg id="'+id+'" '+svgattrs+'>'+item.html()+'</svg>';
        item.remove();
        $(svgcontent).prepend(html);        
    );

这会获取 objs 数组中的所有元素，并将它们作为完整的 SVG 插入到第一个元素的后面（您可以将 prepend 更改为 append 以更改此行为）。

并且 SVG 将与对象具有相同的 id，因此 CSS 动画将应用于完整的 SVG，而不是 SVG 对象。

就是这样！

【讨论】：

您能否提供一个有效的jsFiddle 来证明这在 IE 中有效？

【参考方案4】：

IE 不支持 SVG 元素的 CSS 动画。它也不支持 SVG 具有的标准内置 SMIL 动画。

如果您将动画转换为原生 SVG 动画，您或许可以使用 FakeSmile library 使其正常工作。否则，您将需要为 IE 使用一些替代后备 - 例如动画 gif 或其他东西。