stroke-dasharray与stroke-dashoffset配合transform:rotate()是目前最可控、性能好、兼容性够用的svg线条中心扩散方案，适用于chrome/firefox/safari（ios 15+），不支持ie；radial-gradient因本质为填充、易发灰虚化、无法精确控制路径逻辑而不适用。
stroke-dasharray 和 stroke-dashoffset 配合 transform: rotate() 是目前最可控、性能最好、兼容性也够用的 SVG 线条中心扩散方案——它不依赖 CSS 变量动画或复杂渐变，且在 Chrome/Firefox/Safari（包括 iOS 15+）中表现稳定，IE 则完全不适用。
为什么不用 radial-gradient 做线条扩散
渐变本质是填充，不是描边；想用 radial-gradient 模拟“从中心射出的线”，得靠多层叠加 + 透明度控制，结果容易发灰、边缘虚化、动画卡顿。更关键的是：它无法精确表达“单条线从 0° 开始、逆时针扫出 360°”这种路径逻辑，而真实 UI 中（比如加载指示器、雷达扫描、点击反馈）往往需要这种确定性。
stroke-dasharray + stroke-dashoffset 的工作原理
把一条闭合路径（比如 <circle></circle> 或 <path d="M...Z"></path>）想象成一根首尾相接的绳子。设置 stroke-dasharray="L, L"（L 是路径总长），就等于把整根绳子切成“实线 L + 空白 L”的无限循环；再用 stroke-dashoffset 控制起始绘制点位置：
- 当
stroke-dashoffset = L，实线段完全偏移出去 → 看不见 - 当
stroke-dashoffset = 0，实线段刚好填满整圈 → 完整显示 - 动画就是让
stroke-dashoffset从L线性减到0
但这样只是“一圈同时出现”。要实现“从中心一点出发、向外延展成线”，就得配合 transform: rotate() 让路径本身旋转，再用 stroke-dashoffset 控制露出长度 —— 实质是“旋转 + 截断”双重控制。
实际写法：4 步不能少
以一个从中心辐射 8 条等距线的动效为例（常见于加载图标）：
<svg viewbox="0 0 100 100" width="200" height="200"><g stroke="#333" stroke-width="2" fill="none"><!-- 八条线，每条都是 <line>，起点统一为 (50,50) --><line x1="50" y1="50" x2="50" y2="20" transform="rotate(0 50 50)"></line><line x1="50" y1="50" x2="50" y2="20" transform="rotate(45 50 50)"></line><line x1="50" y1="50" x2="50" y2="20" transform="rotate(90 50 50)"></line><line x1="50" y1="50" x2="50" y2="20" transform="rotate(135 50 50)"></line><line x1="50" y1="50" x2="50" y2="20" transform="rotate(180 50 50)"></line><line x1="50" y1="50" x2="50" y2="20" transform="rotate(225 50 50)"></line><line x1="50" y1="50" x2="50" y2="20" transform="rotate(270 50 50)"></line><line x1="50" y1="50" x2="50" y2="20" transform="rotate(315 50 50)"></line></g></svg>
然后加 CSS 动画：
svg line {
stroke-dasharray: 30; /* 线条可见长度 ≈ 30px */
stroke-dashoffset: 30; /* 初始全隐藏 */
animation: lineExpand 0.6s ease-out forwards;
}
@keyframes lineExpand {
to { stroke-dashoffset: 0; }
}
/* 给每条线错开延迟，形成波浪感 */
svg line:nth-child(1) { animation-delay: 0s; }
svg line:nth-child(2) { animation-delay: 0.05s; }
svg line:nth-child(3) { animation-delay: 0.1s; }
/* ...依此类推 */
注意几个易错点：
-
stroke-dasharray值必须小于线段实际长度（可用getTotalLength()测），否则动画无效 - 不要对
<line></line>直接设transform: rotate()动画，会和stroke-dashoffset冲突；旋转必须写死在 SVG 属性里 - 如果用
<path></path>替代<line></line>，确保d路径是直线且起点固定，否则stroke-dasharray行为不可预测
移动端真机调试时最常被忽略的一点
Safari（尤其是 iOS 16–17）对 SVG 内联 transform 的动画帧率优化较弱，如果发现线条抖动或掉帧，把所有 transform="rotate(...)" 拆成独立 <g transform="..."></g> 包裹，并给 <g></g> 加 will-change: transform。这不是银弹，但能立刻缓解多数渲染撕裂问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
