环形占比图 Share

各段依次顺时针画出，点击某段外移高亮，中心显示该段名称和百分比。点击圆环或右侧图例试试，再点一次取消。

实时 Demo

段间留 2° 细缝更有呼吸感；外移用沿该段角平分线方向的 translate，而不是简单放大

效果拆解

分段用 path 不是 circle：每段一条 M(外弧) A A L(内弧) A Z 的环形扇区路径，点击命中区域精确，外移也不会互相压边。
顺时针依次画出：全部段先透明，rAF 按"当前总进度落在哪一段"来填充该段的 sweep angle，段与段之间自然接力，0.9s 画完全圈。
外移高亮：选中段沿角平分线 translate(dx,dy) 10px（方向 = 该段中心角），同时其余段 opacity 降到 .35；bezier 的 y>1 带轻微弹出。
中心联动：选中时写名称 + 百分比，未选中显示总值；切换用同一补间函数，数字滚动不跳变。
细缝：每段起止角各收缩 1°（gap/2），视觉上就是均匀的细缝，不用额外描边。

AI 提示词

做一个环形占比图：每段用 SVG path 画成环形扇区（外径/内径两条弧闭合），段间留 2° 细缝；进入视口时各段依次顺时针画出——用一个总进度 rAF 补间，按进度落入的区间填充各段的扫过角度，实现接力式生长，约 0.9s 画完全圈；点击某段时该段沿其角平分线方向外移 10px 并高亮（cubic-bezier(.34,1.56,.64,1) 轻微弹出），其余段透明度降到 0.35，环中心显示该段名称与百分比；再点一次恢复。做一个环形占比图：每段用 SVG path 画成环形扇区（外径/内径两条弧闭合），段间留 2° 细缝；进入视口时各段依次顺时针画出——用一个总进度 rAF 补间，按进度落入的区间填充各段的扫过角度，实现接力式生长，约 0.9s 画完全圈；点击某段时该段沿其角平分线方向外移 10px 并高亮（cubic-bezier(.34,1.56,.64,1) 轻微弹出），其余段透明度降到 0.35，环中心显示该段名称与百分比；再点一次恢复。

图例与扇区共用同一份数据 + 同一个选中函数，双向联动零成本。
提示词内置扇区路径与接力绘制算法，AI 能直接跑通。