使用＜line＞标签画虚线 stroke-dasharray讲解

问题描述

在 <line> 标签中添加 stroke-dasharray 属性便可以实现虚线样式

但是今天在网上找的时候，发现有些网站给出了错误的代码，把 stroke-dasharray 放到了CSS中，这样自然是没有效果的。

正确的做法是放到标签属性中：

<line stroke-dasharray="5,5"></line>

此外，这个属性也可以在例如<path>等连线的标签中使用。

属性讲解

stroke-dasharray 属性的参数是一个array，一下大致展示两种：

stroke-dasharray="5,5" //每画5个像素便空5个像素，两个参数与描述顺序相同 stroke-dasharray="5" //效果同上，如果上面两个参数相同，可以这样简写

效果图：

 

stroke-dasharray="5,3,9,2" //每画5个像素空3个像素，画9个像素空2个像素，以此循环

效果图：

 

总的来说，就是按照参数中的数组（如"a, b, c, d"），每画a个像素，空b个像素，接着画c个像素，然后空d个像素，一直循环下去。