如何利用SVG的Q路径命令实现自定义TabBar的平滑切角？

云原生阿岚

2026-8-2

如何用SVG二次贝塞尔曲线实现TabBar的平滑切角

你当前的SVG路径里，Q二次贝塞尔曲线命令的用法有误——Q需要控制点和终点两个不同的坐标对，你重复写了相同的坐标，相当于没有生成曲线，所以切角是尖锐的。

下面是修改后的代码，能实现你要的平滑切角效果：

const width = SCREEN_WIDTH;
const firstStop = width / 2 - 30;
const secondStop = width / 2 + 28;
// 切角圆润程度，可按需调整
const cornerRadius = 10;

<Path
  d={`
  M 0,0 
  H ${firstStop - cornerRadius} 
  // 左侧平滑切角：控制点(firstStop,0)，终点(firstStop,${cornerRadius})
  Q ${firstStop},0 ${firstStop},${cornerRadius} 
  V 35 
  H ${secondStop} 
  V ${cornerRadius} 
  // 右侧平滑切角：控制点(secondStop,0)，终点(${secondStop + cornerRadius},0)
  Q ${secondStop},0 ${secondStop + cornerRadius},0 
  H ${width} 
  V 70 
  H 0 
  Z`}
  fill={colors.accent}
  fillRule='nonzero'
/>

关键说明：

Q命令的正确格式是 Q 控制点X,控制点Y 终点X,终点Y，通过控制点的位置来控制曲线的弯曲度。
左侧切角：从水平线段的终点firstStop - cornerRadius, 0出发，用Q命令把控制点设在firstStop, 0（和起点同水平线），终点落在firstStop, cornerRadius，这样就生成了一个从水平过渡到垂直的平滑圆角。
右侧切角：从垂直线段的终点secondStop, cornerRadius出发，控制点设为secondStop, 0，终点落在secondStop + cornerRadius, 0，实现垂直到水平的平滑过渡。
调整cornerRadius的数值可以改变切角的圆润程度，数值越大，切角越平缓。