stroke是比较重要的svg属性分支
- stroke-width 表示描边的粗细
- stroke-linejoin 表示描边转角的表现方式 miter, round, bevel, inherit
- stroke-dasharray 表示虚线描边
- stroke-dashoffset 表示虚线的起始偏移
主角是stroke-dasharray&stroke-dashoffset
效果详解:张鑫旭.纯CSS实现帅气的SVG路径描边动画效果
直接上代码
path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
1000没有什么特殊含义,只是足够大
illustrator变换路径,置换svg起始点
用于描边时更换方向
另外用transform时会导致z-index失效,所以布局时需要注意。