可用SVG配合stroke-dasharray实现半圆进度图：先画整圆，用stroke-dasharray截取半圆弧长（π×r），再rotate(-90)将起点移至顶部，JS动态更新stroke-dasharray值控制百分比。
用 SVG
和
画半圆弧线
纯 HTML 没法直接画半圆图，必须靠 SVG。核心思路是：画一个完整的圆，再用
截出下半部分（180°），再旋转让它朝上或朝下，最后通过控制描边长度来表现百分比。
关键点：
半圆对应圆周长的一半 → 圆周长 =
，所以半圆弧长 =
设为
，其中
用
把 0% 起点转到顶部（否则默认从 3 点钟方向开始）
示例（r=40，圆心在 50,50）：
这里
≈
（半圆），
≈
（整圆）。设
，X 越大，弧越长。
立即学习
“
前端免费学习笔记（深入）
”；
动态更新百分比要用 JS 改
值
不能只靠 CSS 动画硬写死，得用 JS 计算并重设属性。常见错误是忘记同步更新
或没处理好旋转基准点。
实操要点：
把 SVG 内两个
分别加
，方便 JS 获取
计算时统一用同一个
，避免视觉错位
百分比为 0 时，
应设为
；100% 时为
（即整圈）——但因为只显示半圆区域，实际最大只到
建议封装函数：
，输入 0–100 数字，自动算出对应
值
简短 JS 示例：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
CSS 动画补间要小心
的数值类型
直接对
做 CSS transition 会失败——它不是单值属性，浏览器不支持过渡。必须用 JS +
或 CSS 自定义属性间接驱动。
更稳妥的做法：
用 CSS 定义一个
自定义属性，在 SVG 的
里绑定它
JS 修改该 CSS 变量，再用 CSS 规则映射到
或者干脆用 JS 动画（如
或原生
）操作
错误示范：
—— 无效，别试。
文字居中和响应式缩放容易偏移
半圆图常配中间百分比数字，但
的
/
是绝对坐标，SVG 缩放后文字不会自动居中。常见问题：放大页面后数字跑出圆外、或被裁剪。
解决方法：
文字用
+
，锚点设在圆心（如
）
不要用
直接撑满容器，改用
控制比例，让 SVG 自适应
如果需适配不同屏幕，建议用 JS 监听
后重新计算
和文字
最简健壮结构：
实际做出来才发现，
的两个参数谁大谁小、
正负方向、以及
的中心点是否匹配
，这三个地方一错，弧线就反着走或断开。多调几次，记下自己用的那组“基准值”比查文档快。
stroke-dasharraystroke-dasharray2 * Math.PI * rMath.PI * rstroke-dasharray"${arcLength} ${circumference}"arcLength = Math.PI * r * (percent / 100)transform="rotate(-90 50 50)"125.66Math.PI * 40251.332 * Math.PI * 40stroke-dasharray="X 251.33"stroke-dasharraystroke-dashoffsetidrstroke-dasharray"0 251.33""251.33 251.33"125.66updateGauge(percent)dasharrayfunction 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}`);
}stroke-dasharraystroke-dasharrayrequestAnimationFrame--dashstylestroke-dasharraygsap.to()animate()setAttributetransition: stroke-dasharray 0.3sxytext-anchor="middle"dominant-baseline="middle"x="50" y="50"width: 100%viewBoxresizerfont-sizestroke-dasharraystroke-dashoffsetrotatecx/cy