offset-path本身不改变元素初始位置，仅定义运动轨道；元素必须设position: absolute/fixed且transform: none，否则起始点偏离路径起点，导致定位不准。
offset-path 不能直接用于“定位”，它只驱动动画；要让元素静止在路径某一点，必须用 offset-distance 配合 position: absolute 和显式坐标重置。
为什么 offset-path 写对了元素却不在预期位置？
因为 offset-path 本身不改变元素的初始布局位置——它只是定义了一条“轨道”，元素仍按常规文档流或定位规则渲染，再被“推”上轨道。若没设 position: absolute 或没清空原有 transform，起始点就不是路径起点。
- 必须设置
position: absolute或position: fixed，relative不生效 - 必须显式写
transform: none，哪怕父级没设 transform，继承值也可能干扰 - 路径字符串里的坐标是绝对像素值（如
path("M 0 0 L 100 100")），不随容器缩放，容易偏移 - 若想让元素左上角对齐路径起点，需配合
offset-anchor: 0 0；默认是中心点对齐
如何让元素“停在”路径中某个固定点（比如 37% 处）？
不用动画，只靠样式计算：把 offset-distance 设为具体百分比或长度，并确保其他影响位移的属性归零。
- 写法示例：
offset-path: path("M 0 0 C 50 50, 150 50, 200 0"); offset-distance: 37%; - 必须同时加
transform: none和offset-rotate: auto（如果需要方向对齐） - 注意：
offset-distance: 37%是按路径总长度算的，不是屏幕像素，无法用left/top直接等价替换 - 调试时可用
getTotalLength()在控制台查路径长度，再换算成 px 值验证
Firefox/Safari 下完全不显示？先确认是否真支持
别信版本号，得实测。Firefox（截至 128）明确标记为 “Not planned”，Safari 15.4+ 支持但静默忽略 url(#id) 引用方式。
- CSS 检测写法：
@supports (offset-path: path('')) { ... }，但 fallback 不自动触发 - JS 检测更可靠：
getComputedStyle(el).offsetPath !== ""，返回空字符串即不支持 - Safari 支持
path()，但不支持url(#myPath)；Chrome 两者都行；Firefox 返回空字符串且无提示 - 一旦检测失败，必须降级：用
transform: translate()+requestAnimationFrame手动插值，或引入 GSAP
路径坐标和设计稿 Y 轴相反，怎么对齐？
SVG 坐标系 Y 向下为正，而 Sketch/Figma/PS 默认 Y 向上为正——直接复制 d 值会导致路径倒置。
- 最稳做法：在 SVG 中用
transform="scale(1, -1) translate(0, -height)"翻转整个<path></path>，再导出 d 值 - 手动修正：对每个 Y 坐标做
y' = height - y（需知道 viewBox 高度） - 避免用中文破折号
－替代 ASCII 减号-，否则整个path()解析失败 - 空格不能省：
path("M10,10C20,20,30,20,40,10")在 Safari 中可能失败，必须写成path("M 10 10 C 20 20 30 20 40 10")
真正难的不是写对语法，而是路径起点、锚点、坐标系、浏览器差异这四层叠加后，一个像素的偏差都可能让元素消失在视野外。动手前先用 outline: 1px solid red 包住元素，再逐项关掉 transform、offset-anchor、offset-rotate 排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
