SVG动画是不是在IE11

工作，我有一个非常简单的加载动画，关于Firefox和Chrome完美的作品，但在IE11它没有显示的SVG图形。SVG动画是不是在IE11

下面是完整的例子： 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-width="2" stroke-miterlimit="10"/> 
</svg>

动画，这是一个旋转，正在IE11，但SVG，这是一个圆，是不是被显示。

任何想法？

我只是不知道什么是不支持的IE11。

来源

2015-11-19 canute

哪个版本的IE？ –

在浏览器11上进行Im测试 – canute

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

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

如果您将动画转换为原生SVG动画，则可以使用FakeSmile library来使其工作。否则，你将需要使用一些替代回退的IE - 例如动画GIF或其他东西。

来源

2015-11-20 03:33:48

这种后备将如何看起来像CSS代码？ – nerdess

只有Microsoft Edge将支持SVG CSS转场和动画......尤其是stroke-dasharray。

请请参阅Microsoft Developer文档：

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

允许CSS过渡和动画应用到SVG元素。
前缀的版本：微软边缘积聚10240+

正如你可以在我的例子叉见。由于circle元素上没有stroke属性，因此没有看到加载程序旋转。

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

你可以看到它现在可以旋转。但你将不得不检查浏览器是否为IE，并调整你的stroke-dasharray，以便它更大。由于IE11及以下版本不支持使用CSS动画或转换动画SVG stroke-dasharray和stroke-dashoffset，除非它是Microsoft Edge构建10240+。

但是，如果您需要跨浏览器解决方案来为SVG设置动画效果，尤其是stroke-dasharray和stroke-dashoffset。然后看看使用JS动画库，如GreenSock Animation Platform（GSAP）。使用DrawSVGPlugin

https://greensock.com/drawSVG

来源

2015-11-20 13:59:40

在Edge（20.10240.16384.0）中查看它根本不起作用。我删除了小提琴中不需要的所有内容，以便更容易地看到它：http://jsfiddle.net/z8w4vuau/55/ –

Microsoft声明它支持stroke-dasharray上的CSS动画，以参考stroke-dasharray页面https://msdn.microsoft.com/en-us/library/ff972274(v=vs.85).aspx ..但它是IE所以越野车或非工作行为预计为CSS转换和CSS动画..可能是浏览器错误？但是你有没有试过寻找像GreenSock GSAP DrawSVGPlugin这样的JS解决方案？检查在IE边缘在这个页面上的例子.. http://greensock.com/drawSVG –

我在一个JS库的饮食，所以要说:)但我意识到，我可以用JavaScript做到这一点。但是，这并不重要，所以我只是在IE/Edge中检测并禁用这些动画，直到它被修复。 –

对于遇到问题，这个人，我有一个解决办法。

我有一个完整的SVG ID和CSS动画，都适用于所有其他主流浏览器。

我把我的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插入到t他第一个（你可以改变prepend到append来改变这种行为）。

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

就是这样！

来源

2017-08-31 13:40:59 Gabiton

你可以提供一个工作[jsFiddle]（https://jsfiddle.net/），证明它可以在IE中使用吗？ –

SVG动画是不是在IE11

回答

相关问题