IE全系、Safari≤12.0、iOS≤12.1及部分安卓WebView（如UC、QQ旧内核）会触发conic-gradient降级需求，需通过JS运行时检测+SVG fallback实现可靠兼容。
哪些浏览器会触发降级需求
IE 全系、Safari ≤12.0、iOS ≤12.1、部分安卓 WebView（如 UC、QQ 浏览器旧内核）直接忽略 conic-gradient 声明，渲染为空白或回退为纯色背景。不能只靠 @supports (background: conic-gradient()) 判断——某些旧 Safari 会识别语法但角度偏移严重，视觉上仍是错的。
@supports 不可靠，得用 JS 特性检测 + 渐进增强
用 CSS 检测无法区分“语法支持但渲染异常”的情况，必须结合运行时行为判断：
- 创建一个临时
<div>，设置background: conic-gradient(red, blue)和固定尺寸 - 用
getComputedStyle(el).backgroundImage检查是否返回包含conic-gradient的字符串 - 再通过
el.getBoundingClientRect()或 canvas 像素采样验证中心点是否真有扇形过渡（可选，精度要求高时用） - 若失败，动态添加
class="no-conic"，切换到降级方案
推荐的降级方案：SVG 饼图 + CSS fallback 层叠
不要用 PostCSS 插件或 base64 图片模拟——前者不解决渲染缺失，后者无法响应数据变化。真正可用的降级是：
- HTML 中同时保留 SVG 饼图容器和 CSS 圆形元素：
<div class="pie-chart"><svg>...</svg></div> - CSS 层叠写法：
.pie-chart { background: #eee; } .pie-chart:not(.no-conic) { background: conic-gradient(...); }，让 SVG 在降级时显示，CSS 渐变在支持时覆盖 - SVG 饼图用
<path d="M ... A ...">手动计算弧线路径，或用 D3 / Chart.js 等轻量库生成（仅需 2–3KB） - 避免 Canvas 降级：它需要手动管理 DPR、缩放、重绘逻辑，交互成本远高于 SVG
动态更新时别混用两种方案
如果饼图数据会变（比如从 [30%, 40%, 30%] 变成 [50%, 25%, 25%]），切忌在 JS 中根据支持与否分别走 DOM 操作（SVG）和 style 赋值（CSS）。统一抽象为一个 render 函数：
立即学习“前端免费学习笔记（深入）”；
- 输入：数据数组、容器元素、是否启用 conic-gradient
- 输出：自动更新 SVG
<path>的d属性，或更新 CSS 自定义属性--start/--end - 关键点：角度计算逻辑复用同一套（
Math.round(percentage * 360)），避免两边实现不一致
最易被忽略的是角度基准——无论用 SVG 还是 conic-gradient，起始角都应统一从正右方向（0deg）开始顺时针累加；否则降级后扇区位置会整体偏转 90 度。
