用CSS transform + SVG可实现可缩放仪表盘刻度，核心是用配合rotate()精准生成角度刻度，需统一坐标系、动态生成、极坐标计算末端点并用text-anchor/dominant-baseline对齐数字，避免单位混淆与硬编码。
用 CSS transform + SVG 实现可缩放的仪表盘刻度
纯 HTML 无法直接画出带角度的刻度线，必须借助 SVG 或 Canvas。SVG 是更轻量、可响应、支持 CSS 控制的首选方案，<svg></svg> 中的 <line></line> 配合 transform="rotate()" 能精准生成任意角度的刻度。
常见错误是硬写 36 条 <line></line> 标签——既难维护，又无法动态调整范围或精度。正确做法是用 JavaScript 动态生成，或用 CSS 自定义属性驱动 SVG 变换。
- 刻度中心点必须设为 SVG 的
viewBox中心（如viewBox="-100 -100 200 200"），否则rotate()会绕左上角转 - 每条刻度线建议用
<g></g>包裹，方便统一加 class 控制粗细/颜色，例如class="tick-major"和class="tick-minor" - 避免在
style属性里拼接 rotate 值，改用transform属性并保持单位一致（deg 不要漏）
刻度数字怎么对齐到旋转后的线末端
数字标签（<text></text>）不能靠 guess 坐标硬写位置。必须和对应刻度线共用同一组极坐标计算：先算出末端点 x = r * cos(θ)、y = r * sin(θ)，再用 text-anchor 和 dominant-baseline 微调对齐方式。
容易踩的坑是角度单位混淆：JavaScript 的 Math.cos() 默认用弧度，而 SVG 的 rotate() 用角度，二者别混用；建议全程用弧度计算坐标，再转角度传给 rotate。
- 主刻度数字建议放在半径
r = 90处，小刻度数字可省略或缩小字号 -
text-anchor="middle"对应水平居中，dominant-baseline="middle"对应垂直居中，组合起来才能稳稳钉在末端点 - 数字内容别用
innerHTML拼接，用textContent防 XSS，尤其当数值来自用户输入时
如何让刻度随数据范围自动重绘（比如 0–100 → 0–250）
核心是把刻度逻辑封装成函数，接收 min、max、majorStep、minorPerMajor 四个参数，而不是写死 0–100。每次数据变化，清空旧 <g class="ticks"></g>，重新 append 新节点。
注意：重绘时不要 innerHTML = ""，它会销毁所有事件监听器和绑定状态；应该用 while (group.firstChild) group.removeChild(group.firstChild) 或 group.replaceChildren()（现代浏览器）。
- 角度跨度建议固定（如 270° 表示从 -45° 到 225°），再按比例映射数值区间，避免刻度“挤”在一边
- 主刻度数量不宜超过 12 条，否则视觉混乱；可用
Math.round((max - min) / majorStep)控制上限 - 如果用 Web Components 封装，记得在
attributeChangedCallback里触发重绘，而非只监听 props
移动端适配和性能要注意什么
SVG 本身是矢量图，缩放不糊，但大量 <line></line> + <text></text> 在低端安卓机上仍可能卡顿。实测超过 100 个 SVG 元素时，首次渲染延迟明显。
解决办法不是删刻度，而是分层：把静态部分（背景弧、主刻度线、主数字）抽成独立 SVG 作为 background-image，动态部分（指针、当前值 label）用另一个 SVG 叠加。这样重绘只影响小范围 DOM。
- 禁用
pointer-events: none在刻度层，防止误触干扰上层交互 - 避免在
resize事件里高频重绘，用ResizeObserver替代，并加防抖（300ms） - 不要给每个
<text></text>加title属性做 tooltip——移动端不触发 hover，还拖慢解析
真正麻烦的从来不是画出第一条刻度线，而是让它的角度、长度、数字、响应行为全部随数据联动且不掉帧。多数人卡在“怎么让数字跟着线转”，其实关键在坐标系统一和 DOM 更新策略——这两处没理清，后面加动画、主题色、国际化全是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
