关键在于用 stroke-dashoffset 动画配合 getTotalLength() 控制虚线起点，使渐变色“沿路径行走”；渐变本身静态定义于 ，通过 stroke=”url(#grad)” 应用到描边路径。
SVG
纯 CSS 无法让渐变“沿着 SVG 路径”移动——它只能填充路径，不能让渐变色标随路径走向滑动。真正可行的方案是用 SVG 的 gradientUnits="userSpaceOnUse" + JavaScript 动态更新 offset 或 x1/y1/x2/y2，再结合 stroke-dasharray 和 stroke-dashoffset 控制“渐变起点位置”。
- 必须把路径转为描边（
stroke），不能靠填充（fill） - 渐变定义要放在
id被stroke="url(#grad)"引用 - 动画本质是移动虚线起点（
stroke-dashoffset），不是移动渐变本身
PHP 页面中嵌入 SVG 渐变路径的最小可运行结构
PHP 只负责输出 HTML/SVG，不参与动画逻辑。重点是确保生成的 SVG 元素可被 JS 操作，且内联样式或 ID 不冲突。
注意：stroke-dasharray 值应 ≈ 路径总长度（可用 getTotalLength() 获取），否则动画会断续或跳变。
用 JavaScript 控制渐变“沿路径行走”的核心逻辑
所谓“渐变行走”，其实是让高亮段在路径上滑动——靠的是不断减小 stroke-dashoffset，配合 stroke-dasharray 固定值，形成“光标扫过”效果。渐变色只是静态铺在整条线上，视觉上像在动。
立即学习“PHP免费学习笔记（深入）”；
- 先用
path.getTotalLength()精确获取路径长度，赋给stroke-dasharray - 用
requestAnimationFrame或setInterval每帧修改path.style.strokeDashoffset - 当
offset从length减到-length，就完成一次循环 - 若想“渐变色块”更窄，可设
stroke-dasharray="10,190"（显示 10px，空 190px）
示例关键代码：
const path = document.getElementById('motionPath');
const len = path.getTotalLength();
path.style.strokeDasharray = len;
path.style.strokeDashoffset = len;
function animate() {
const offset = parseFloat(path.style.strokeDashoffset) - 1;
path.style.strokeDashoffset = offset < -len ? len : offset;
requestAnimationFrame(animate);
}
animate();
容易被忽略的兼容性与性能坑
IE 完全不支持 stroke-dasharray 动画；Safari 对 getTotalLength() 在未渲染 SVG 中返回 0；移动端频繁重排可能掉帧。
- 务必等 SVG 渲染完成再调用
getTotalLength()，可用document.addEventListener('DOMContentLoaded', ...)或svg.onload - 避免在 PHP 中硬编码
stroke-dasharray数值——必须由 JS 运行时计算 - 不要用 CSS
@keyframes动stroke-dashoffset：iOS Safari 15.4 前不支持动画该属性 - 若路径复杂、数量多，建议用
transform: translate()移动一个带渐变的
最麻烦的其实是路径长度动态变化（比如响应式缩放后），这时得监听 resize 并重新计算 getTotalLength()。