stroke-dasharray详解

一、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时，应该优先考虑兼容性问题。

参考资料：

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/288886.html