本文介绍了SVG动画的基础知识，包括使用<animate>标签进行属性动画，详细讲解了attributeName、from、to、dur和fill等属性的用法。此外，还阐述了SVG路径的基本元素，如M/m、L/l、H/h、V/v等，并通过实例展示了如何创建和操作路径。对于想要深入理解HTML5前端SVG应用的开发者来说，这是一个不错的入门指南。
SVG动画 <animate>
<animate>标签放在图形内部，以下的实例为将矩形在3秒内将其x属性从0更改为300。即从x
<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300"
dur="3s" fill="freeze" repeatCount="2"/>
</rect>
</svg>
- attributeName：指定哪个属性需要产生动画效果（x、y）
- from：指定属性的起始值
- to：指定属性的结束值
- dur：指定动画运行的时间（持续时间）
- fill=“freeze|remove”：指定动画播放完毕后是停留在播放的终点还是回到起始位置
- repeatCount：指定动画的重复播放次数， “indefinite” 为无限重复播放
SVG路径<path>
- M/m = moveto 移动当前位置
- L/l = lineto 从当前位置绘制线段到指定位置
- H/h = horizontal lineto 从当前位置绘制水平线到达指定的x 坐标
- V/v = vertical lineto 从当前位置绘制竖直线到达指定的y 坐标
- C/c = curveto 从当前位置绘制三次贝塞尔曲线到指定位置
- S/s = smooth curveto 从当前位置光滑绘制三次贝塞尔曲线到指定位置
- Q/q = quadratic Belzier curve 从当前位置绘制二次贝塞尔曲线到指定位置</
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
