马黑黑《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 ：矩形宽高，支持圆角

⬇️ 选择动画路径：