本文主要探讨如何利用CSS的stroke-dasharray和stroke-dashoffset属性实现SVG路径的描边动画。通过设置stroke-dasharray定义虚线模式，stroke-dashoffset控制虚线起点偏移，结合CSS动画改变偏移量，从而达到动态描绘SVG线条的效果。文章还提到了如何获取SVG路径的总长度以辅助动画配置。
SVG中有一个比较重要度属性，stroke。stroke有很多兄弟属性：
1）stroke：线的颜色；
2）stroke-width：线的宽度；
3）stroke-linecap：线的端点，可用值有butt、round、square、inherit；
4）stroke-dasharray：虚线描边，可用值为none、<dasharray>（一个逗号或空格分隔的数值列表）、inherit。表示各个虚线端的长度。可以是固定的长度值，也可以是百分比值；inherit表继承；
5）stroke-dashoffset：虚线的起始偏移，可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。
6）stroke-opacity：线的透明度。
此次主要介绍stroke-dasharray和dash-offset两个属性。
最低0.47元/天 解锁文章
扫一扫
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
