SVG中用a/A路径基元绘制带圆角圆弧段的问题咨询

核心结论 #

完全可以继续用a/A路径基元绘制带圆角的圆弧段，只要参数计算准确；如果嫌参数计算麻烦，单独绘制圆角路径会更直观，不容易出错。

为什么会出现“扁平化”？ #

你看到的扁平化，本质是用a命令画出来的是椭圆弧而非正圆弧，原因通常是这两点：

• a命令里的两个半径参数设得不一样，或者加了非0的旋转角度；
• 圆角弧的起点、终点位置计算错误，导致SVG只能用椭圆弧来衔接这两个点，自然看起来扁。

用a/A正确绘制的关键 #

要画出正圆的圆角，必须满足这几个条件：

• 确保a命令的两个半径值完全相等（比如a r r 0 0 1 x y，前两个r是圆角半径）；
• 旋转角度设为0（正圆不需要旋转）；
• 精确计算圆角弧的起点和终点：
  假设原扇形中心是(cx, cy)，扇形半径R，起始角度startAngle，圆角半径r：
  • 圆角的圆心坐标是：(cx + (R - r)*cos(startAngle), cy + (R - r)*sin(startAngle))（起始端圆角）；
  • 圆角弧的起点是直边的终点，沿垂直于直边的方向向外移动r的位置；
  • 圆角弧的终点是大圆弧的起始点，坐标需匹配相切关系；
• 正确设置大弧标志（第5个参数）和扫掠标志（第6个参数），确保画出的是你需要的那段小圆弧。

更简单的替代方案：单独绘制圆角 #

如果不想算复杂的坐标，直接给每个圆角单独画一段路径：

• 用a命令单独写一段路径，只处理这个小圆弧的参数；
• 或者用circle元素定位到圆角圆心，半径设为r，再用clip-path裁剪出需要的扇形部分（只显示对应角度的弧段）。

内容的提问来源于stack exchange，提问作者ecraven