CSS offset-path 属性之几何图形路径

马黑黑

CSS offset-path 属性值除了可以使用来源于 SVG 的 path 函数、ray 函数赋值，还可以使用 SVG 基本图形充当函数赋值。基本图形函数制作的路径更易理解、代码更简洁。

offset-path 属性基本图形函数

序号	函数	语法	备注
1	circle（圆）	circle(r at x y)	r ：半径，x、y
2	ellipse（椭圆）	ellipse(rx ry at x y)	rx、ry ：x和y轴半径，x、y ：圆心位置
3	inset（内矩形）	inset(top right bottom left [round number])	支持单值、多值表达，支持圆角
4	polygon（多边形）	polygon(x1 y1, x2 y2, ..., xn yn)	坐标数据支持数值、百分比
5	xywh（矩形路径）	xywh(x y width height [round number])	x、y ：矩形左上角坐标，width、height ：矩形宽高，支持圆角

⬇️ 选择动画路径：

红影

offset-path 属性基本图形倒也不多，容易记的。
感谢黑黑的耐心讲解，学习了

红影

一般用得较多的应该是圆、椭圆、多边形吧，内矩形和矩形好像用得少，因为多边形也能做矩形。

马黑黑

红影 发表于 2026-7-29 21:22
offset-path 属性基本图形倒也不多，容易记的。
感谢黑黑的耐心讲解，学习了

SVG基本图形也不多，然后，能用于 offset-path 的图形还不全

马黑黑

红影 发表于 2026-7-29 21:25
一般用得较多的应该是圆、椭圆、多边形吧，内矩形和矩形好像用得少，因为多边形也能做矩形。

是的。但是，inset 矩形参数少，而且较早版本的现代浏览器也完好支持，好用