结论是stroke-dasharray关键在数值序列的循环解释逻辑及与stroke-linecap、路径坐标的协同：偶数个值严格交替实/空，奇数个自动复制成偶数；单值等价重复；画圆点须用“0 l”配round端点，并将路径向内缩进stroke-width/2以确保对齐。
直接说结论：用 stroke-dasharray 绘制虚线或点划线，关键不是“填什么数”，而是理解它怎么循环解释数值序列，以及如何配合 stroke-linecap 和路径坐标控制端点形状与对齐位置。
stroke-dasharray 数值怎么写才不出错
它接收空格或逗号分隔的非负数字，按顺序解释为「实线长、空白长、实线长、空白长……」，且自动循环。常见错误是以为三个数就是「实-空-实」，其实不是：
- 单个值如
5→ 等价于5 5（实5、空5） - 两个值如
8 3→ 实8、空3、实8、空3…… - 三个值如
6 2 4→ 自动复制成6 2 4 6 2 4，再两两配对：实6/空2、实4/空6、实2/空4……容易错位，慎用奇数个值 - 想画等距圆点？用
0 6配合stroke-linecap="round"，0 表示不画实线段，只靠 round 端点“冒”出圆点
为什么虚线首尾对不上、边角发虚
闭合路径（比如 <rect></rect> 或 <circle></circle>）默认从起点开始画虚线，但路径总长未必能被 stroke-dasharray 总和整除，导致末尾断在空白段里。解决方法不是调数值，而是用 stroke-dashoffset 微调起始偏移：
- 先用 JS 调用
getTotalLength()拿到路径真实长度（比如 120） - 设
stroke-dasharray="30 10"（总和 40），那么偏移量取stroke-dashoffset="10"或"30"常能对齐视觉起点 - 正方形边框想让四个角都落在实线段上？试
stroke-dashoffset=stroke-dasharray总和的一半（如20） - 注意：
stroke-dashoffset正数 = 向左偏移（视觉上虚线“提前出现”），负数 = 向右（“延迟出现”）
点状边框（dotted）和线段边框（dashed）的本质区别
CSS 的 border: 2px dotted red 渲染的是独立圆点，而 SVG 默认的 stroke-dasharray="2" 画出来的是短横线——根本差异在端点处理：
- 必须显式加
stroke-linecap="round"，否则stroke-dasharray="0 4"也只出方头短线 - 路径 d 坐标要向内缩进
stroke-width / 2，否则描边中线会溢出边界，造成虚线“露边”或遮挡内容 - 例如 3px 红色点边框，推荐：
d="M1.5,1.5 h197 v97 h-197 Z"+stroke-dasharray="0 6"+stroke-linecap="round"
最容易被忽略的点：虚线效果是否生效，和 stroke 是否有值、fill 是否为 none、路径是否闭合都强相关；stroke-dasharray 设了但没看到虚线，八成是路径本身没 stroke 或被 fill 盖住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
