SVG：理解stroke-dasharray和stroke-dashoffset属性

1.前言

最近刚学习SVG看到一个霓虹灯的动画效果感觉很炫酷，便按照文章巧了下来，虽然实现了但是对于 stroke-dasharray和stroke-dashoffset属性还不是特别清楚，通过查找资料和看文档终于理解，希望对大家有帮助

2.属性作用

我们知道SVG是在画画，那么stroke属性系列就是画笔。 stroke-dasharray和stroke-dashoffset是stroke的两个属性

stroke-dasharray

定义

官方文档给出的解释是：The stroke-dasharray property controls the pattern of dashes and gaps used to form the shape of a path's stroke. 按照我的理解：stroke-dasharray就是控制画笔的虚实，通过实线和虚线的来控制画

作用范围

可以在shape(形状)和text content elements(字体元素)上起作用

参数

接下来重点讲下他的参数，这里是可能是大家最无法理解的地方。dasharray顾名思义就是线段的数组，他的参数可以是一个数组，每个参数又有什么含义呢 官方文档解释： **The first value and every second value in the list aft