@if (chart(); as c) {
  <svg
    [attr.viewBox]="viewBox()"
    class="block w-full"
    [style.max-width.px]="c.size"
    role="img"
    [attr.aria-label]="c.a11y"
  >
    <!-- 网格环 -->
    @for (ring of c.rings; track $index) {
      <path [attr.d]="ring" fill="none" stroke="var(--edge)" stroke-width="1" />
    }

    <!-- 轴线 -->
    @for (s of c.spokes; track $index) {
      <line
        [attr.x1]="s.x1"
        [attr.y1]="s.y1"
        [attr.x2]="s.x2"
        [attr.y2]="s.y2"
        stroke="var(--edge)"
        stroke-width="1"
      />
    }

    <!-- 数据多边形 -->
    <path [attr.d]="c.dataPath" [attr.fill]="color()" fill-opacity="0.18" [attr.stroke]="color()" stroke-width="2" stroke-linejoin="round" />

    <!-- 数据点 -->
    @for (d of c.dots; track $index) {
      <circle [attr.cx]="d.x" [attr.cy]="d.y" r="3" [attr.fill]="color()" />
    }

    <!-- 维度标签 -->
    @for (l of c.labels; track $index) {
      <text
        [attr.x]="l.x"
        [attr.y]="l.y"
        [attr.dy]="l.dy"
        [attr.text-anchor]="l.anchor"
        class="fill-muted text-[11px]"
      >
        {{ l.text }}
      </text>
    }
  </svg>
}