can*_*ute 27 css animation svg internet-explorer-11
我有一个非常简单的加载动画,可以在Firefox和Chrome上完美运行,但在IE11中它没有显示SVG数字.
以下是完整示例: JSFiddle示例
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不支持的内容.
Jon*_*llo 25
只有Microsoft Edge将支持SVG CSS Transitions和Animation ..尤其如此stroke-dasharray.
请参阅Microsoft Developer Docs:
https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements
允许CSS过渡和动画应用于SVG元素.
未加前缀的版本:Microsoft Edge build 10240+
正如你在我的示例中看到的那样.由于没有元素stroke属性,您没有看到加载器旋转circle.
https://jsfiddle.net/z8w4vuau/50/
你现在可以看到它如何旋转.但你必须检查浏览器是否是IE并调整你的,stroke-dasharray所以它是更大的破折号.由于IE11及以下版本不支持动画SVG stroke-dasharray以及stroke-dashoffsetCSS动画或过渡,除非它是Microsoft Edge build 10240+.
但是如果你需要一个跨浏览器解决方案,SVG动画,尤其是stroke-dasharray和stroke-dashoffset.然后研究使用像GreenSock动画平台(GSAP)这样的JS动画库.使用DrawSVGPlugin
IE11 支持 CSS3 动画，但不支持 SVG 元素的子节点。您可以为 SVG 节点本身设置动画，因此我的解决方案是将这些部分分解为单独的 SVG 并使用 CSS3 为这些部分设置动画。
https://codepen.io/getsetbro/full/Bxeyaw/
如果您添加元标记，即使 IE11 处于兼容模式，这也将起作用
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
IE不支持SVG元素的CSS动画.它也不支持SVG具有的标准内置SMIL动画.
如果将动画转换为原生SVG动画,则可以使用FakeSmile库使其工作.否则你将需要为IE使用一些替代回退 - 例如动画gif或其他东西.
| 归档时间： |
|
| 查看次数： |
53080 次 |
| 最近记录： |