svg animation应用之-描边效果

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失效，所以布局时需要注意。