解决SVG animation 在IE中不起作用

daydream 发布于2019-08-01 17:29 / 1686人阅读

摘要：问题描述没办法解决路径运动的问题，下图路径运动的过程，通过查资料发现所有的的版本都不支持。在中没有水流动的效果。更新在开发过程中发现只能应用于路径这里还有另外一种实现方法，应用于等案例代码

问题描述

CSS animation没办法解决SVG路径运动的问题，下图路径运动的过程，通过查资料发现所有的IE的版本都不支持SVG animation。在IE中没有水流动的效果。

主要代码

stroke-miterlimi 不可以添加。stroke-width="6"的值要小于等于6.从网上查资料，有案例是大于6也可以运行，感觉可能是简单路径的原因，具体原因不是很清楚，效果代码如下，测试在IE中显示效果受到很多条件的限制，但是基本上可以运动起来了。案例代码

完整效果

涉及到TweenMax制作动画，后续把完整代码整理上传，先看下效果图

总结

写东西的时候总是想着要对读者负责，但是知识有限，能完成并写出来希望能跟大家一起学习进步，有错希望能得到指点，喜欢希望能收到点赞。

更新

在开发过程中发现var pathLength = element.getTotalLength();
只能应用于path路径
这里还有另外一种实现方法，应用于path line 等
案例代码

云服务器 GPU云服务器不起作用事务不起作用 nginx不起作用切换tab不起作用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51176.html

解决SVG animation 在IE中不起作用

摘要：问题描述没办法解决路径运动的问题，下图路径运动的过程，通过查资料发现所有的的版本都不支持。在中没有水流动的效果。更新在开发过程中发现只能应用于路径这里还有另外一种实现方法，应用于等案例代码问题描述 CSS animation没办法解决SVG路径运动的问题，下图路径运动的过程，通过查资料发现所有的IE的版本都不支持SVG animation。在IE中没有水流动的效果。showImg(h...

Ocean 2019-08-20 19:00 评论0 收藏0
GreenSock (TweenMax) 动画案例(二)

摘要：实现效果动画分解灯光闪烁文字出现水流心电图知识点可尽情骚扰欧巴了解基本的知识点写在前面写过第一篇文章后动画案例一再回头看发现代码太多，根本没耐心去看完。操作这里就不再赘述了，在动画案例一中有说到转文件。四段水流都是这种方式来移动。实现效果 showImg(https://segmentfault.com/img/bVT51P?w=613&h=568); 动画分解 1.灯光闪烁2.文字...

Michael_Ding 2019-08-20 19:06 评论0 收藏0
Velocity.js简明教程（中文版下）

摘要：简明教程中文版上滚动动画使用，你可以快速实现垂直和水平滚动动画。下面的显示了一条微笑鱼的图像。不幸的是，浏览器不支持的，并且没有为此错误提供兼容性修补程序。这是为了防止用户在动画过程中重复按下按钮，这将构建动画队列。 Velocity.js简明教程（中文版上）滚动动画使用Velocity.js，你可以快速实现垂直和水平滚动动画。滚动可以与整个页面或元素相关。无论哪种方式，都要在即...

joyvw 2019-08-20 15:59 评论0 收藏0