如何为SVG环形图（Donut Chart）的路径添加间隙并设置圆角端点

没问题！我来帮你搞定这个环形图的修改需求，实现路径间隙和圆角端点的效果其实很简单，咱们一步步来：

一、实现路径间隙的核心思路 #

环形图的每个扇形路径是通过计算起始/结束角度绘制的，要加间隙，只需要给每个扇形的结束角度减去一小段固定弧度，让相邻路径之间留出空隙即可。

具体代码修改（在donut-chart.component.ts中） #

1. 先定义一个控制间隙大小的变量（可以根据视觉效果调整）：

// 间隙弧度值，约等于1.15度，数值越大间隙越宽
private gapAngle = 0.02;

2. 修改扇形角度计算逻辑，给非最后一个扇形减去间隙角度（避免最后一个扇形和第一个重叠时多出间隙）：

generatePaths() {
  this.paths = [];
  let startAngle = -Math.PI / 2; // 从圆环顶部开始绘制
  const totalValue = this.data.reduce((sum, item) => sum + item.value, 0);

  for (let i = 0; i < this.data.length; i++) {
    const sliceAngle = (this.data[i].value / totalValue) * 2 * Math.PI;
    // 最后一个扇形不减去间隙，保证圆环闭合
    const endAngle = i === this.data.length - 1 
      ? startAngle + sliceAngle 
      : startAngle + sliceAngle - this.gapAngle;

    // 以下是原有的路径坐标计算逻辑，无需修改
    const startX = this.centerX + this.radius * Math.cos(startAngle);
    const startY = this.centerY + this.radius * Math.sin(startAngle);
    const endX = this.centerX + this.radius * Math.cos(endAngle);
    const endY = this.centerY + this.radius * Math.sin(endAngle);
    const largeArcFlag = sliceAngle > Math.PI ? '1' : '0';

    const path = [
      `M ${startX} ${startY}`,
      `A ${this.radius} ${this.radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`
    ].join(' ');

    this.paths.push({ path, color: this.data[i].color });
    startAngle = endAngle;
  }
}

二、设置路径端点圆角 #

SVG路径的圆角端点可以通过stroke-linecap="round"属性直接实现，注意因为咱们的环形图是用stroke绘制的（不是填充扇形），所以这个属性会直接作用在路径的两端。

具体代码修改（在donut-chart.component.html中） #

给动态生成的<path>元素添加stroke-linecap="round"属性：

<svg [width]="size" [height]="size">
  <!-- 背景圆环 -->
  <circle [cx]="centerX" [cy]="centerY" [r]="radius - strokeWidth / 2" fill="#f3f3f3"></circle>
  <!-- 数据扇形路径 -->
  <path
    *ngFor="let slice of paths"
    [attr.d]="slice.path"
    [attr.stroke]="slice.color"
    [attr.stroke-width]="strokeWidth"
    fill="none"
    stroke-linecap="round"
  ></path>
</svg>

效果验证 #

修改完成后，你会看到：

• 每个扇形路径之间都有均匀的小间隙
• 所有扇形的两个端点都变成了圆润的弧形，不会出现尖锐的棱角

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