SVG饼图核心是将百分比转圆心角（×3.6），再用<path d="M...A...">结合极坐标与large-arc-flag/sweep-flag自动绘制扇形，配合viewBox、CSS变量和媒体查询实现响应式、可维护的静态比例展示。
直接用 <canvas> 手动绘图最可控，但如果你只是想快速展示几个百分比数字、不追求动画或交互，<svg> + 原生 CSS 就够了——不需要任何 JS 库，也不用引入 Chart.js 这类重型依赖。
为什么不用 Chart.js 或 ECharts 做简单比例面板
这类库适合动态数据、多图联动、导出 PDF 等场景；但如果你的饼图数据是静态的（比如“前端 45%、后端 35%、测试 20%”），加载整个图表库反而拖慢首屏、增加 bundle 体积、还容易和现有样式冲突。
- Chart.js 默认会初始化 canvas 上下文并监听 resize，静态页里纯属冗余
- ECharts 的
init必须等 DOM 挂载，SSR 或微前端中易报Cannot read property 'getBoundingClientRect' of null - 两者都默认注入全局样式，可能覆盖你已有的
.panel或.card类
<svg> 饼图怎么算角度和坐标
核心就两步：把百分比转成圆心角（×3.6），再用极坐标算弧形路径终点。不用 trig 函数手算——SVG 的 <path d="M... A..."> 支持大弧标志（1 或 0）自动处理 180° 以上扇形。
示例：45% 对应圆心角 162°，起始角设为 -90°（让第一块从正上方开始），终点角就是 72°：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<path d="M100,100 L100,0 A100,100 0 0,1 192.4,130.9 Z" fill="#4f46e5"/>
-
A100,100表示椭圆半径（这里画圆，xy 相同） - 第三个
0是 x-axis-rotation，通常填0 - 第四个
0是 large-arc-flag：≤180° 填0，否则填1 - 第五个
1是 sweep-flag：顺时针填1，逆时针填0
用 CSS 控制颜色、文字和响应式缩放
SVG 内部元素可以像普通 HTML 一样写 class，然后用 CSS 控制。关键点是：用 viewBox 替代固定宽高，再配合容器 width 百分比实现缩放。
- 给外层
<div class="pie-panel">设width: 200px; max-width: 100%，内部<svg viewBox="0 0 200 200">就能等比缩放 - 文字用
<text>标签，通过transform="translate(x,y)"定位，不要用x/y属性硬编码像素值 - 配色统一用 CSS 变量：
fill: var(--color-primary)，方便主题切换 - 小屏幕下文字太挤？加媒体查询：
@media (max-width: 480px) { .pie-label { font-size: 12px; } }
常见翻车点：IE 兼容、环形图缺口、百分比对不上
IE11 能渲染 SVG，但不支持 transform 在 <text> 上的 rotate，得改用 text-anchor + dominant-baseline 配合 x/y 坐标微调；环形图不是简单“挖空”，而是两个同心扇形路径差集，别直接用 stroke-width 模拟；最后——所有百分比加起来必须严格等于 100%，浮点误差会导致最后一块角度错位，建议后端或构建时做 round(percentage * 100) / 100 校准。
真正麻烦的从来不是画弧线，而是让 3 个数字在不同设备上都对齐、不重叠、不溢出，且修改配色时不用改 SVG 内联 style。
