css中不存在shape()函数，动画路径仅支持offset-path: path("...")；clip-path的polygon()等形状函数不能用于运动路径，因其语义与作用域完全不同。
shape() 函数并不存在于标准 CSS 中 —— 你无法用 shape() 定义动画路径。这是个常见误解，源于把早期 CSS Motion Path 规范草案（已废弃）和当前实际支持的语法搞混了。
CSS 动画路径目前只支持 path()，且仅限部分浏览器
真正可用的是 path() 函数，属于 CSS Motion Path 模块（offset-path 属性），它接受一个 SVG path 字符串，但**不是通过 CSS 语法“定义”路径，而是直接内联 SVG path 数据**：
-
offset-path: path("M0,0 C20,30 40,5 60,20");✅（Chrome / Edge 105+、Safari 16.4+ 支持） -
offset-path: shape(circle(50px));❌（shape()不是合法函数；clip-path或mask才用shape()类函数，但它们不控制运动） - 不支持用 CSS 原生语法（如
circle()、inset()、polygon()）替代path()的 SVG 字符串 —— 这些形状函数在offset-path上无效
为什么不能用 clip-path 的 polygon() 之类来当运动路径？
clip-path 和 offset-path 是完全不同的属性，作用域和语义隔离：
-
clip-path: polygon(0 0, 100% 0, 100% 100%);只裁剪元素可视区域，不影响位置或位移逻辑 -
offset-path必须是可参数化的轨迹，只有path()提供足够表达力（贝塞尔曲线、弧线等），而polygon()是离散点集，无方向、无插值语义 - 尝试
offset-path: polygon(...)会触发 CSS 解析错误，浏览器直接忽略该声明
想绕过 SVG path 字符串？现实方案只有两个
如果你抗拒手写 "M...C..." 字符串，可行路径有限：
- 用 JS 生成 path 字符串再注入
offset-path：比如用SVGPathElement.getPathSegAtLength()或第三方库（如svg-path-commander）把图形转成字符串 - 用
offset-path: url(#myPath)引用内联 SVG 的<path></path>元素 —— 这仍是 SVG，但可复用、可维护，且支持 CSS 变量间接控制（需配合getBBox()+ JS 计算） - 放弃
offset-path，改用transform: translate()+@keyframes手动拟合路径（适合简单直线/缓动，复杂曲线误差大、维护成本高）
真正麻烦的点在于：path 字符串没法用 CSS 变量动态拼接（path("M" var(--x) "," var(--y)) 无效），所有坐标必须硬编码或由 JS 注入。这点比 SVG <animatemotion></animatemotion> 更不灵活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
