必须用 position: absolute 或 fixed，否则 offset-path 静默失效；元素不动最常见原因是定位未设对，relative、static、sticky 均被忽略，且需搭配 display: block/inline-block 及内联 path 元素。
必须用 position: absolute 或 position: fixed，否则 offset-path 完全不生效——浏览器会静默丢弃该声明。
为什么写了 offset-path 元素却一动不动？
最常见原因是定位没设对。CSS 的运动路径模块只对绝对定位元素起作用：position: relative、static、sticky 下的声明会被忽略，且控制台不报错。
- 显式写
position: absolute，别依赖父容器 transform 或 flex 模拟定位 - 建议搭配
inset: 0或top: 0; left: 0;，避免因父容器 padding/border 导致初始位置偏移 - 元素需是块级或行内块：
display: block或display: inline-block；原生 SVG 元素（如<circle>）直接套offset-path无效
offset-path: url(#id) 不动？检查路径是否“可寻址”
用 url(#myPath) 引用 SVG 路径时，失败往往不是语法问题，而是路径不可见或不可访问。
-
<path>必须内联在当前 HTML 文档中（例如塞进<svg width="0" height="0" style="position: absolute">），不能来自外部文件或<use>引用 - id 必须大小写完全一致：
url(#MyPath)对应id="MyPath"，写成url(#mypath)就静默失效 -
<path>要设fill="none"或visibility="hidden"，否则可能遮挡内容或干扰渲染 - 包裹 SVG 的容器不能是
display: none——它会断开 CSS 对路径的引用；用width="0" height="0"更安全
用 path() 字符串时，哪些语法细节会直接导致 Safari/Chrome 崩溃？
Firefox 已放弃支持 offset-path，Safari 和 Chrome 对字符串路径容错极低：一个空格、一个单位、一个大小写错误，动画就停摆。
立即学习“前端免费学习笔记（深入）”；
- 坐标值不带单位：
M100,50合法，M100px,50px非法 - 必须用大写绝对命令：
M、L、Q、C；小写m、l、q在 Safari 中解析不稳定 - 空格和逗号要规范：
path("M0,0 C50,-50 150,-50 200,0")可行，但path("M0,0c50,-50,150,-50,200,0")（省略空格）在 Safari 里可能崩 - Y 轴向下为正，若路径来自设计稿（通常 Y 向上为正），需手动翻转 Y 值，否则轨迹倒置
- 避免闭合指令
Z：Firefox 遇到它可能卡死渲染线程；Safari 对含Z的循环路径支持也不稳定
怎么让元素自动转向、不“滑着走”？
默认元素方向固定，沿曲线移动时像一块砖被拖着走。加 offset-rotate: auto 才能让其正 X 轴始终对齐路径切线方向。
- 显式写出
offset-rotate: auto，不要依赖默认行为（某些旧版 Safari 支持不稳定） - 想叠加固定偏角（比如让箭头图标始终朝上），写成
offset-rotate: auto 90deg - 如果元素是三角形或带尾迹的图标，中心点可能不在视觉焦点上，要用
offset-anchor调整锚点，例如offset-anchor: 0 0锚定左上角 -
offset-anchor兼容性较弱（Safari 16.4+、Chrome 115+），生产环境建议先测试，必要时用固定偏移微调
真正难的不是写对第一段路径，而是当路径变长、坐标精度混杂、多工具导出数据拼接时，offset-distance 的百分比插值会轻微抖动——这不是 bug，是浏览器在不同精度坐标间做线性映射时的必然偏差。统一用小数点后一位（如 100.0）导出所有坐标，比调 timing-function 更治本。
