stroke-dasharray通过数字序列精确控制虚线实段与空段长度，偶数个值交替解释，奇数个值自动复制成偶数，单值等价于该值重复；配合stroke-dashoffset可对齐首尾、实现流动动画及响应式适配。

SVG 的 stroke-dasharray 是控制描边虚线样式的核心属性，它不单是“画虚线”，而是通过一组数字精确调度“实线段”和“空白段”的长度序列。用对了，能实现节奏感强的动画、数据可视化中的动态边框、甚至手绘风格描边；用错了，容易出现错位、断点不齐或动画卡顿。

理解 dasharray 的数值逻辑

它的值是一组用空格或逗号分隔的非负数字，例如：5 3、2,4,6,1。这些数字按顺序循环解释为：实线长度、空白长度、实线长度、空白长度……

• 偶数个数值：严格交替“实—空—实—空…”。如 4 2 表示画 4px 实线、留 2px 空白，重复执行。
• 奇数个数值：自动复制一遍形成偶数序列。如 3 1 2 等价于 3 1 2 3 1 2，再按偶数规则解析。
• 单个数值（如 5）等价于 5 5，即等长实线与空白。
• 设为 0 时，对应段长为 0 —— 可用来制造“隐藏某段”或精细控制起始偏移。

让虚线起点对齐图形首尾

默认情况下，虚线从路径起点开始绘制，但路径闭合（如 <rect></rect>、<circle></circle>）或复杂路径常出现首尾虚线不衔接的问题。关键靠 stroke-dashoffset 配合调整：

• 先用 getTotalLength() 获取路径总长（需在 JS 中调用），比如得到 120；
• 若希望虚线从中间开始“破开”，可设 stroke-dashoffset="60"；
• 若想让每个角都落在实线段上（如正方形边框），可尝试 offset = dasharray 总和的一半，或微调至视觉对齐。

配合 CSS 动画实现流动虚线

最常用且性能友好的动效方式是动画化 stroke-dashoffset，制造“线在跑”的效果：

• 先设 stroke-dasharray 为路径全长（如 120），再设 stroke-dashoffset="120"，此时整条线被“藏”在偏移后的位置，不可见；
• 用 @keyframes 将 stroke-dashoffset 从 120 动画到 0，线就“画出来”了；
• 若要循环流动，设 stroke-dasharray="30 10"（总长 40），再让 dashoffset 从 40 → 0 循环，就能看到持续滚动的虚线。

响应式与缩放下的稳定性处理

SVG 缩放（如 viewport 变化、CSS transform: scale()）可能使虚线密度失真。稳妥做法：

• 避免在 CSS 中用 px 单位写 dasharray，改用无单位数值（SVG 原生支持）；
• 对需要随容器缩放的图标，把 dasharray 放在 <style></style> 内或内联，并用 JS 监听 resize 重算路径长度后更新；
• 使用 vector-effect: non-scaling-stroke 可强制描边粗细不缩放，但注意它不影响 dasharray 的数值缩放 —— 此时建议搭配 userSpaceOnUse 渐变或 JS 动态重设。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！