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>、<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>内或内联，并用 JS 监听resize重算路径长度后更新； - 使用
vector-effect: non-scaling-stroke可强制描边粗细不缩放，但注意它不影响dasharray的数值缩放 —— 此时建议搭配userSpaceOnUse渐变或 JS 动态重设。
