可用SVG配合stroke-dasharray实现半圆进度图：先画整圆，用stroke-dasharray截取半圆弧长（π×r），再rotate(-90)将起点移至顶部，JS动态更新stroke-dasharray值控制百分比。
用 SVG <circle></circle> 和 stroke-dasharray 画半圆弧线
纯 HTML 没法直接画半圆图，必须靠 SVG。核心思路是：画一个完整的圆，再用 stroke-dasharray 截出下半部分（180°），再旋转让它朝上或朝下，最后通过控制描边长度来表现百分比。
关键点：
- 半圆对应圆周长的一半 → 圆周长 =
2 * Math.PI * r，所以半圆弧长 =Math.PI * r -
stroke-dasharray设为"${arcLength} ${circumference}"，其中arcLength = Math.PI * r * (percent / 100) - 用
transform="rotate(-90 50 50)"把 0% 起点转到顶部（否则默认从 3 点钟方向开始）
示例（r=40，圆心在 50,50）：
<svg width="100" height="60" viewbox="0 0 100 60"><circle cx="50" cy="50" r="40" fill="none" stroke="#e0e0e0" stroke-width="8"></circle><circle cx="50" cy="50" r="40" fill="none" stroke="#4caf50" stroke-width="8" stroke-dasharray="125.66 251.33" stroke-dashoffset="0" transform="rotate(-90 50 50)"></circle></svg>
这里 125.66 ≈ Math.PI * 40（半圆），251.33 ≈ 2 * Math.PI * 40（整圆）。设 stroke-dasharray="X 251.33"，X 越大，弧越长。
动态更新百分比要用 JS 改 stroke-dasharray 值
不能只靠 CSS 动画硬写死，得用 JS 计算并重设属性。常见错误是忘记同步更新 stroke-dashoffset 或没处理好旋转基准点。
实操要点：
- 把 SVG 内两个
<circle></circle>分别加id，方便 JS 获取 - 计算时统一用同一个
r，避免视觉错位 - 百分比为 0 时，
stroke-dasharray应设为"0 251.33"；100% 时为"251.33 251.33"（即整圈）——但因为只显示半圆区域，实际最大只到125.66 - 建议封装函数：
updateGauge(percent)，输入 0–100 数字，自动算出对应dasharray值
简短 JS 示例：
function updateGauge(percent) {
const r = 40;
const circumference = 2 * Math.PI * r;
const arcLength = (percent / 100) * Math.PI * r; // 半圆范围内的有效长度
const gauge = document.getElementById('gauge-fill');
gauge.setAttribute('stroke-dasharray', `${arcLength} ${circumference}`);
}
CSS 动画补间要小心 stroke-dasharray 的数值类型
直接对 stroke-dasharray 做 CSS transition 会失败——它不是单值属性，浏览器不支持过渡。必须用 JS + requestAnimationFrame 或 CSS 自定义属性间接驱动。
更稳妥的做法：
- 用 CSS 定义一个
--dash自定义属性，在 SVG 的style里绑定它 - JS 修改该 CSS 变量，再用 CSS 规则映射到
stroke-dasharray - 或者干脆用 JS 动画（如
gsap.to()或原生animate()）操作setAttribute
错误示范：transition: stroke-dasharray 0.3s —— 无效，别试。
文字居中和响应式缩放容易偏移
半圆图常配中间百分比数字，但 <text></text> 的 x/y 是绝对坐标，SVG 缩放后文字不会自动居中。常见问题：放大页面后数字跑出圆外、或被裁剪。
解决方法：
- 文字用
text-anchor="middle"+dominant-baseline="middle"，锚点设在圆心（如x="50" y="50"） - 不要用
width: 100%直接撑满容器，改用viewBox控制比例，让 SVG 自适应 - 如果需适配不同屏幕，建议用 JS 监听
resize后重新计算r和文字font-size
最简健壮结构：
<svg viewbox="0 0 100 60" preserveaspectratio="xMidYMid meet"><circle ...></circle><circle ...></circle><text x="50" y="50" text-anchor="middle" dominant-baseline="middle">75%</text></svg>
实际做出来才发现，stroke-dasharray 的两个参数谁大谁小、stroke-dashoffset 正负方向、以及 rotate 的中心点是否匹配 cx/cy，这三个地方一错，弧线就反着走或断开。多调几次，记下自己用的那组“基准值”比查文档快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
