关于如何制作svg动画。
今日发现有同事做一个动画，是把svg放在div里面，然后给div加动画，来做一个loading的效果。 然后这样的话，在重复使用上，应用起来会很麻烦，所以研究了一下在svg里面加动画效果。
1.animateTransform
这个属性是可以用来设置svg动画的。 里面有一个form 和 to 属性。 第一个参数是代表转动的幅度。 第二个和第三个参数是用来代表转动的中心点位置。
<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20.165" cy="20.165" r="20.165" fill="#F8BBD0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 20C12 15.5817 15.5817 12 20 12C24.4183 12 28 15.5817 28 20C28 24.4183 24.4183 28 20 28C15.5817 28 12 24.4183 12 20ZM26.7694 20C26.7694 16.2615 23.7387 13.2308 20.0002 13.2308C16.2616 13.2308 13.231 16.2615 13.231 20C13.231 23.7386 16.2616 26.7693 20.0002 26.7693C23.7387 26.7693 26.7694 23.7386 26.7694 20Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.0781 13.6925C16.4354 12.632 18.1437 12 19.9997 12C21.8553 12 23.5634 12.6318 24.9206 13.692L24.078 14.5967C22.9438 13.7393 21.5312 13.2308 19.9999 13.2308C18.4681 13.2308 17.0552 13.7396 15.9208 14.5973L15.0781 13.6925Z" fill="#37519B"></path>
</svg>如果我们要给上面的这个svg 加一个转动的动画。我们可以在第二个path里面加一个animateTransform，让它围绕着这张图的中心点来做360度的旋转。
<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20.165" cy="20.165" r="20.165" fill="#F8BBD0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 20C12 15.5817 15.5817 12 20 12C24.4183 12 28 15.5817 28 20C28 24.4183 24.4183 28 20 28C15.5817 28 12 24.4183 12 20ZM26.7694 20C26.7694 16.2615 23.7387 13.2308 20.0002 13.2308C16.2616 13.2308 13.231 16.2615 13.231 20C13.231 23.7386 16.2616 26.7693 20.0002 26.7693C23.7387 26.7693 26.7694 23.7386 26.7694 20Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.0781 13.6925C16.4354 12.632 18.1437 12 19.9997 12C21.8553 12 23.5634 12.6318 24.9206 13.692L24.078 14.5967C22.9438 13.7393 21.5312 13.2308 19.9999 13.2308C18.4681 13.2308 17.0552 13.7396 15.9208 14.5973L15.0781 13.6925Z" fill="#37519B"><animateTransform attributeName="transform" attributeType="XML" type="rotate"dur="1s" from="0 20 20"to="360 20 20" repeatCount="indefinite" /></path>
</svg>加上这个代码就可以让这个spinner转动起来。
关于如何制作svg动画。相关推荐
- 如何使用CSS来修改SVG原点和制作SVG动画
SVG元素可以像HTML元素一样,使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果. SVG元素可以像HTML元素一样,使用CSS keyfr ...
- svg android动画制作,SVG动画案例的学习_SVG, SVG Animation, Animation, Web动画 教程_W3cplus...
平面设计已成为2016年可见的趋势,显然,这就是SVG用法又重新走入人们的视野的原因.好处有很多: 独立的分辨率.跨浏览器兼容性以及DOM节点的可访问性.本文中,我们将看看如何使用SVG从简单的插图创 ...
- svg动画制作_制作第一个SVG动画
svg动画制作 Story of a designer trying to code animations instead of asking a dev to figure it out. 一位设计 ...
- svg动画制作_制作动画SVG横幅
svg动画制作 I've been reading David Walsh's blog for years. The tips and tutorials he shares have helped ...
- HTML5: 利用SVG动画动态绘制文字轮廓边框线条
DEMO: 点击这里看效果 简要教程 这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效.SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单.精美的图标和文字.关于使用S ...
- 苹果系统使用svg 动画_为什么要使用SVG图像：如何为SVG设置动画并使其快速闪电化
苹果系统使用svg 动画 我们为什么要使用SVG? (Why Are We Using SVG?) The web development sector is growing at a rapid p ...
- svg 动画_根据AI导出的SVG path制作SVG线条动画
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 首先祝大家2019新年快乐,万事大吉,猪事顺利,阖家欢乐. 前面文章SVG 线条动画基础入门知识学习到了基础知识,现在来给 ...
- svg android动画制作,使用 SVG 来制作 Morphing 动画效果
何为Morphing动画 开始之前,先来了解下什么是Morphing动画.所谓Morphing动画是表示,同一个模型,从一个形状变到另一个形状.如下图所示,从形状1渐变到形状2,再从形状2渐变到形状3 ...
- matlab制作有趣动画制作,18个超有趣的SVG绘制动画赏析
本文作者html5tricks,转载请注明出处 SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种 ...
最新文章
- 五千万美元注资孵化器，ETC能实现绝地反击吗？
- 根据gtf格式的基因注释文件得到人所有基因的染色体坐标
- git push error. ! [rejected] master - master (non-fast-forward)
- Java性能优化(12):最小化类和成员可访问能力
- ALV的SAP自带标准程序实例
- C# WPF Application 下的文件操作
- tableau linux无网络安装_举个栗子！Tableau 技巧（127）：购物篮分析之关联购买
- 写了多年代码，你会 StackOverflow 吗
- ExpandableListActivity列表嵌套列表
- 北大青鸟java+web_java web ui开发
- work summary（1）
- Unity3D学习笔记（二十七）：MVC框架下的背包系统（2）
- Java对接海康威视明眸门禁设备
- python用opencv实现图片的美白磨皮_OpenCV 磨皮-Python
- 教你玩转ACDSEE
- OpenCV-Python教程
- 【C语言】之实现大小写字母转换
- 编写一个程序对Largest函数进行测试,找出一组数据的最大值
- C语言简介及进制换算
- 查看和调试core文件