SVG 动画不适用于 IE11
Posted
技术标签:
【中文标题】SVG 动画不适用于 IE11【英文标题】:SVG animation is not working on IE11 【发布时间】:2016-02-22 02:12:33 【问题描述】:我有一个非常简单的加载动画,可以在 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 或其他东西。
【讨论】:
以上是关于SVG 动画不适用于 IE11的主要内容,如果未能解决你的问题,请参考以下文章