stroke-dasharray 是精确控制虚线节奏的属性，以“实线长、空隙长”交替的数字序列定义虚线模式，如"10,5"表示10px实线+5px空隙循环；单值如"10"等价于"10,10"；总和小于路径长则重复，大于则视觉趋近实线。
什么是 stroke-dasharray？它怎么控制虚线
stroke-dasharray 不是“画虚线的开关”，而是精确控制虚线节奏的尺子。它接受一组数字，按“实线长度、空隙长度、实线长度……”交替解释。比如 stroke-dasharray="10,5" 表示画 10px 实线、空 5px、再画 10px 实线，以此类推。
关键点在于：如果只给一个数（如 "10"），等价于 "10,10"；如果总和小于路径总长，模式会自动重复；如果总和远大于路径长（比如设成 "1000,1000"），看起来就是全实线——因为第一段实线就盖满了整条边。
对 <rect></rect> 或 <path></path> 这类封闭图形，它的“路径总长”由周长决定，可用 getTotalLength() 获取，这点直接影响动画逻辑。
用 CSS 动画实现虚线边框呼吸效果
最常用的是“虚线位移动画”：固定 stroke-dasharray，用 stroke-dashoffset 平移动画，制造流动感。但若想实现“从无到有→变密→淡出”的呼吸式虚线边框（比如按钮悬停时边框渐显为虚线），得配合 stroke-dasharray 的值变化。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
实操要点：
- 先用 JS 获取图形周长：
const len = el.getTotalLength()，存为 CSS 变量或内联 style，避免硬编码 - 初始状态设
stroke-dasharray="0, len"（即完全隐藏） - 动画终点设
stroke-dasharray="4,4"（标准虚线），并配stroke-dashoffset="0" - CSS 中必须声明
stroke-linecap: round或square，否则圆角矩形的虚线端点会错位 - 不要直接在
@keyframes里 animatingstroke-dasharray—— 浏览器不支持该属性的插值，会跳变。应改用stroke-dashoffset+ 固定dasharray，或用 JS requestAnimationFrame 控制
stroke-dasharray 在不同 SVG 元素上的表现差异
<rect></rect>、<circle></circle>、<path></path> 对 stroke-dasharray 的响应一致，但“起点”位置不同：<rect></rect> 从左上角开始顺时针算周长；<circle></circle> 从 3 点钟方向开始；<path></path> 完全取决于 d 属性定义的路径走向。
常见翻车场景：
- 对
<rect x="10" y="10" width="100" height="60"></rect>，周长是2*(100+60)=320，但若手动写死stroke-dasharray="320"，结果不是“一整段实线”，而是“一段 320px 实线 + 320px 空隙”——因默认空隙也占一半，需写成"320,0"才真正实线 - 用
<polyline></polyline>绘制折线时，stroke-dasharray沿折线逐段计算，拐点处不会强制对齐虚线节奏，容易出现“断点错位” - SVG 嵌套在 HTML 中且被缩放（如用
transform: scale(0.5)），stroke-dasharray值仍按原始坐标系解释，视觉虚线会变粗/变稀，需同步缩放 dasharray 数值
为什么动画卡顿或不触发？检查这三点
虚线动画失效，90% 不是代码写错，而是底层机制没对齐：
-
stroke必须有明确颜色（哪怕stroke="#000"），设为stroke="none"或未声明时，stroke-dasharray直接被忽略 - 动画元素必须已渲染完成才能调用
getTotalLength()，在 Vue/React 中别在mounted或useEffect初始执行时就取，加个requestAnimationFrame延迟一帧更稳 - CSS 动画中若同时设置了
transition: stroke-dasharray 0.3s，而浏览器不支持该属性过渡，会导致整个 transition 失效（降级为无动画），应只对stroke-dashoffset做 transition
复杂点在于：虚线动画本质是路径长度 + 偏移量 + 渲染时机三者耦合，任意一环没对齐，看到的就是“不动”或“闪一下”。别猜，用 DevTools 的 SVG 面板实时改 stroke-dashoffset 值，先确认动得了，再套动画逻辑。
