offset-path动画不动主因是浏览器兼容性差：Firefox完全不支持，Safari仅支持path()函数且需大写命令；应加position: absolute、用@supports检测、避免url()引用和小写路径命令。
offset-path 动画不动？先查浏览器支持和语法写法
Chrome 75+、Safari 15.4+ 支持 offset-path，Firefox（截至 128）完全不支持，且无实现计划。动画“没反应”大概率是开了 Firefox 或用了 Safari 不认的写法。
常见错误现象：offset-path: url(#myPath) 在 Safari 中静默失败；offset-path: path("M0,0l50,0")（小写命令）在部分 Safari 版本里切线计算出错；路径字符串末尾多空格或换行，导致解析中断。
- 用
@supports (offset-path: path(""))做特性检测，只对支持的浏览器启用动画逻辑 - Safari 仅支持
path()函数，不支持url()引用 SVG 元素 - 统一用大写字母命令：
path("M0,0 L50,0 Q100,25 150,0")，避免混用m/l/q - 绝对定位必须加：
position: absolute，否则元素不会按路径位移
path() 里的坐标到底是相对谁的？
path() 的坐标系不是页面视口，也不是父容器，而是元素自身的初始位置——即未动画前 getBoundingClientRect() 返回的左上角点。这意味着你写的 M100,200 是从该点向右 100px、向下 200px 开始画路径。
- 想让路径随容器缩放稳定，优先用相对贝塞尔：
path("M0,0 C30,-20 70,-20 100,0") - 硬编码绝对坐标（如
M200,150）在响应式布局下极易偏移，尤其容器有 margin/padding 时 - 若需对齐页面某固定点，得用 JS 算出相对偏移量再拼进
path()字符串，不能直接抄 SVG 的d属性值
offset-distance 动画卡顿、跳帧、终点停不准？
offset-distance 本身不触发重排优化，浏览器渲染压力大，尤其路径复杂或动画时长过短时。它按路径总长度做线性插值，但路径曲率不均会导致视觉“变速”，不是 bug，是数学本质。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 别用
transition驱动offset-distance，改用@keyframes + animation-timing-function: linear - 路径中避免大量短直线拼接（如
"M0,0 L1,0 L2,0 L3,0"），浮点误差会累积，导致offset-distance: 100%卡在终点前几像素 - 用 SVG 的
getTotalLength()获取真实长度，再换算百分比：offset-distance: calc(200px / 320px * 100%) - 复杂路径建议控制点数在 50 个以内，含大量
C或S指令会显著增加 GPU 渲染压力
offset-rotate: auto 为啥不转？或者转歪了？
offset-rotate: auto 要求浏览器实时计算路径切线方向，但它在多个边界场景下不可靠：起点曲率为 0、折线拐角、或与其他 transform 叠加时都会失效。
- 路径以直线段开头（如
"M0,0 L100,0"）时，起点切线方向不确定，auto可能 fallback 到0deg；显式加offset-rotate: 0deg初始化可缓解 - 尖锐折线（如
"M0,0 L100,0 L100,100"）处，auto不保证对齐拐角方向；此时应配合offset-rotate: auto reverse或 JS 手动计算角度 - 元素自身有
transform: rotate(30deg)，会与offset-rotate叠加，造成角度混乱；动画期间禁用其他旋转类 transform
真正难的不是写出第一段 offset-path 动画，而是判断什么时候该坚持 CSS 方案、什么时候该切到 JS 插值——Firefox 不支持是硬伤，而 Safari 对贝塞尔精度的容忍度、Chrome 对长路径的帧率表现，都得实测。别依赖 auto，也别迷信 path() 字符串一粘就灵。
