纯css+svg可实现响应式、无障碍刻度盘；用预渲染或复用减少dom节点；指针需包裹并用transform定位中心；文字用px单位和dominant-baseline="middle"确保清晰对齐。
用 CSS + SVG 实现可读刻度盘，别碰 Canvas 动画
纯 CSS + SVG 就能做出响应式、语义清晰、无障碍友好的刻度盘，没必要一上来就写 Canvas 动画。SVG 的 <lineargradient></lineargradient> 和 <g transform></g> 足够支撑常见仪表（如电量、水压、温度）的静态/半动态展示。真正需要实时重绘（比如每 50ms 更新指针）时，再考虑 requestAnimationFrame 配合 SVG transform。
SVG 刻度线怎么批量生成又不卡页面
手动写 100 条 <line></line> 是自找麻烦。用 JavaScript 动态生成前，先确认是否真要“运行时生成”——多数场景下，预渲染 SVG 更稳：
- 用循环生成
<line x1="..." y1="..." x2="..." y2="..."></line>字符串，一次性注入<g id="scale-lines"></g>容器里，避免逐个appendChild - 刻度数量超 50 条时，改用
<use href="#tick"></use>复用单个<line id="tick"></line>，靠transform="rotate(...) translate(...)"定位，大幅减少 DOM 节点数 - 别在
resize或scroll里重绘刻度组——缩放用viewBox+ CSSwidth控制，不是靠 JS 算像素
指针旋转对不准零点？问题出在 transform-origin
SVG 元素默认以左上角为旋转原点，但仪表指针必须绕中心点转。直接写 transform="rotate(45)" 肯定偏移：
- 给指针
<path></path>或<rect></rect>加transform-origin: center没用——SVG 不认这个 CSS 属性 - 正确做法：把指针包裹进
<g transform="translate(cx, cy)"></g>，再在内部用transform="rotate(angle) translate(0, -length)"（负 Y 向上拉到中心） - 角度计算别硬套
Math.atan2：若刻度是 0–100 对应 0°–270°，直接用angle = value / 100 * 270 - 135（-135 是让 0 值指向正左，符合常规表盘习惯）
数字刻度文字模糊、错位，检查 font-size 和 dominant-baseline
SVG 文字在不同缩放下容易发虚或上下漂移，尤其用 rem 或百分比设 font-size 时：
-
font-size必须用绝对单位（px），例如font-size="12"；设成"1.2em"会继承父容器缩放，导致文字忽大忽小 - 文字垂直对齐靠
dominant-baseline="middle"（而非text-anchor），否则数字总浮在刻度线上方或下沉 - 如果数字和刻度线有视觉间隙，别调
dy，改用transform="translate(0, 2)"微调——dy在缩放后失效
复杂点在于刻度密度和文字重叠的取舍：小尺寸仪表上，宁可省略部分数字（如只标 0、25、50、75、100），也不要强行塞满导致可读性崩坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
