纯HTML/CSS无法真正实现水球图，必须用SVG+CSS动画：以viewBox="0 0 200 200"为基准，用贝塞尔曲线绘制周期性波浪路径，通过动态更新d属性和translateY()控制液位（y=100−progress×80）与波浪浮动，避免clip-path兼容性问题及缩放锯齿。
用 SVG + CSS 动画实现最简水球图
纯 HTML/CSS 能做水球图，但必须借助 <svg> 和 <path> 模拟波浪路径，再用 transform: translateY() 或 clip-path 控制液面高度。直接用 <div> 加 border-radius 做“圆球”再叠波浪是假效果——它无法响应进度变化，也不支持平滑填充动画。
核心思路：一个圆形 <svg> 容器，内部用贝塞尔曲线画一条周期性波动的封闭路径，通过 JS 动态更新 d 属性和 transform 实现液位升降+波浪浮动。
常见错误现象：clipPath 在 Safari 中不支持百分比坐标、transform: scale() 放大后波浪锯齿、液面高度计算没考虑 SVG viewBox 缩放比例。
- SVG
viewBox="0 0 200 200"是基准，所有坐标按此归一化 - 波浪路径建议用 2 段三次贝塞尔曲线拼接，周期控制在
stroke-dasharray: 120左右更自然 - 液位 y 坐标 =
100 - (progress * 80)（假设满值对应底部，0% 对应顶部） - 用
requestAnimationFrame驱动波浪横向偏移，避免@keyframes卡顿
Canvas 绘制动态水球图的关键参数
Canvas 更灵活，适合需要实时响应或大量实例的场景（比如仪表盘里十几个水球并列）。但必须手动处理抗锯齿、DPR 适配、重绘节流——否则在高分屏上模糊或掉帧。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：canvas.width/canvas.height 直接设像素值导致缩放失真；波浪函数用 Math.sin(x * freq) 但没乘以振幅，结果波纹平得看不见；进度更新时未清空上一帧，出现残影。
- 初始化时用
canvas.width = canvas.offsetWidth * window.devicePixelRatio适配高清屏 - 波浪 y 偏移推荐用
y = centerY + amplitude * Math.sin(x * frequency + time * speed) - 液面高度用
liquidY = centerY + (1 - progress) * radius * 0.9（0.9 是留白系数，防溢出） - 每次
draw()前必须调用ctx.clearRect(0, 0, canvas.width, canvas.height)
使用 d3.js 的 waterWave 插件要注意兼容性
d3-waterwave 这类插件封装了 SVG 波浪逻辑，但默认不支持 IE11，且 v3+ 版本要求 D3 v6+，若项目还在用 D3 v4 就会报 selection.join is not a function。
真实使用场景中，多数人卡在配置项传参格式不对：比如 percent 必须是 0–1 的小数，不是 0–100 的整数；stroke 颜色写成 "#3a88ff" 没问题，但写成 rgb(58, 136, 255) 会导致波浪路径渲染失败。
- 初始化前检查全局
d3版本：console.log(d3.version) -
config.waveHeight值过大会让波浪顶穿球体，建议 ≤ 12 - 修改颜色务必同时改
config.fill（液体内色）和config.stroke（波浪边线色），否则视觉割裂 - 动态更新进度不能直接改
config.percent，得调用实例的update(newPercent)方法
React/Vue 里复用封装组件的陷阱
在 React 里用 useEffect 初始化 Canvas 或 SVG，但没监听 progress props 变化，导致进度更新后 UI 不变；Vue 中用 v-if 控制水球显隐，却忘了在 mounted 里重新初始化，结果隐藏后再显示就是空白。
性能影响明显的地方：每个水球都启一个 requestAnimationFrame，10 个实例就占满主线程；或者把波浪动画写成 CSS @keyframes，结果所有实例共用同一套动画，波浪相位完全同步，失去真实感。
- React 中用
useRef保存 canvas 引用，useEffect里加if (prevProgress !== progress)判断再重绘 - Vue 中在
watch: { progress() { this.redraw() } }里触发重绘，别只靠mounted - 多个实例的波浪动画要用不同
startTime偏移，例如time + index * 0.3 - 移动端务必加
will-change: transform到波浪容器，否则 iOS Safari 动画卡顿
水球图看着简单，真正要让它在 Chrome/Firefox/Safari/Edge 上液面平滑、波浪连贯、响应及时，每个环节的数值和时机都得抠——尤其是液面高度与波浪振幅的比例、DPR 下的 canvas 像素对齐、以及动画帧之间的状态隔离。
