一、stroke-dasharray的基础知识
stroke-dasharray属性可以用来控制SVG中的线段虚线，其中，属性值是一组数字，指定了虚线和实线的长度。在这一方面，stroke-dasharray是非常适合展示多样化线型、边框和类似的视觉效果的。
可以通过设置stroke-dasharray的值，改变虚线的样式，前一个数字表示虚线的长度，后一个数字表示实线的长度。如果数值组合不是偶数，则它们会后续循环使用，直到达到路径的末端。同样的， 如果设置所有的值相同的话，则所有的线段都会等长。
<svg width="200" height="200">
<line x1="50" y1="50" x2="150" y2="150" stroke="blue" stroke-width="4" stroke-dasharray="10,5,5"/>
</svg>
二、stroke-dasharray的使用场景
stroke-dasharray主要应用于以下场景：
- 线条轮廓
- 虚线边框
- 运动轨迹
以下是应用于线条轮廓的实例，通过不同的stroke-dasharray值设置，可以得到不同的虚线轮廓样式。
<svg width="200" height="200">
<line x1="50" y1="50" x2="150" y2="150" stroke="blue" stroke-width="4" stroke-dasharray="10,5"/>
<line x1="50" y1="70" x2="150" y2="70" stroke="red" stroke-width="4" stroke-dasharray="15,10"/>
<line x1="50" y1="90" x2="150" y2="90" stroke="green" stroke-width="4" stroke-dasharray="20,5,5,5"/>
</svg>
三、stroke-dasharray的动画效果
stroke-dasharray可以用来创建动画效果，实现路径画图的效果。通过改变stroke-dasharray的值，在不同的时间点展示不同的路径。
<svg width="200" height="200">
<path fill="none" stroke="#9b4b41" stroke-width="6">
<animate attributeName="stroke-dasharray" values="0 100 350;350 100 0" dur="5s" repeatCount="indefinite" />
<animate attributeName="stroke-dashoffset" values="0;-450" dur="5s" fill="freeze" repeatCount="indefinite" />
<animate id="color" attributeName="stroke" values="#9b4b41;#3f3f3f" begin="0s;color.end+0.5s" dur="5s" repeatCount="indefinite" />
<animate attributeName="d" values="M 20 100 C 20 100 100 20 200 100 C 300 180 180 240 100 150 C 50 100 10 150 20 100;M 50 100 L 600 100" dur="5s" repeatCount="indefinite" />
</path>
</svg>
四、stroke-dasharray的应用拓展
在实际案例应用中，stroke-dasharray的应用还可以拓展到其他方面，例如关闭虚线等，创造出更多种类的视觉效果。
以下是一个实现关闭虚线的案例。
<svg width="400" height="100">
<path d="M 0 50 H 400" stroke="#C4DBE0" stroke-width="8">
<animate attributeName="stroke-dasharray" values="20,10; 0,30; 0,30; 0,30;" dur="2s" repeatCount="indefinite" />
</path>
</svg>
五、stroke-dasharray的兼容性
可以使用stroke-dasharray来创建虚线动画，但是这个属性需要比较老版本的浏览器才能支持，例如IE9和较新的版本，各大主流浏览器都支持该属性。因此，在使用stroke-dasharray时，应该优先考虑兼容性问题。
