最轻量兼容的SVG星星渐变点亮方案是直接用CSS transition控制fill属性，需通过类名或内联样式触发，避免JS直接修改style.fill导致动画中断；关键要设display:block、overflow:hidden，hover时切换fill色，并用clip-path配合百分比实现半星效果。
用 CSS transition 控制 fill 实现 SVG 星星渐变点亮
直接改 fill 颜色 + transition 是最轻量、兼容性最好的方式，不需要 JS 也能做交互反馈。关键点在于：SVG 的 fill 是可过渡属性，但必须用内联样式或 CSS 类控制，不能靠 JS 直接写 style.fill = 'gold' 后再加 transition——那样会因重排中断动画。
常见错误是给 <path> 或 <polygon> 单独设 transition: fill 0.2s，却忘了父容器（比如 <svg>）没设 display: block，导致部分浏览器渲染错位；还有人用 opacity 过渡，结果星星“淡入”而不是“填色”，语义不对。
- 确保每个星星是独立
<svg>或统一用<use>引用符号，避免 fill 冲突 - 过渡写在 hover 或 :checked 状态上，例如：
.star:hover path { fill: #ffc107; transition: fill 0.25s ease; } - 若用伪元素模拟星星（如
::before+ Unicode ★），color可过渡，但无法单独控制单颗星——得用 JS 切换类
用 clip-path 做半星过渡（支持 0.5 颗星）
要实现「鼠标停在第 3 颗星中间时，显示 2.5 颗亮星」，纯 fill 不行，得靠遮罩裁切。核心思路是：固定一颗灰色星，上面盖一层同形状的金色星，再用 clip-path 从左往右逐步露出金色部分。
这个方案的问题是 Safari 对 clip-path 的 inset() 或 polygon() 动画支持不稳定，推荐用 clip-path: inset(0 X% 0 0)，X 动态计算为 (100 - rating * 20)（5 颗星场景）。注意 Chrome 110+ 才支持 clip-path 过渡，旧版需降级为整星切换。
立即学习“前端免费学习笔记（深入）”；
- 必须给容器设
overflow: hidden，否则裁切失效 -
clip-path的百分比值要基于父容器宽高，建议星星用固定宽高（如width: 20px; height: 20px） - JS 计算时别直接用
offsetLeft，要用getBoundingClientRect()防止缩放或 transform 影响精度
React/Vue 中避免重复渲染导致过渡中断
框架里常犯的错：每次鼠标移动都触发 setState 或响应式赋值，导致星星组件频繁 re-render，CSS 过渡被强制重置。不是过渡写得不对，是 DOM 节点被重建了。
解决方法很简单：把星星的 hover 状态用 CSS 类控制，JS 只负责更新一个数据字段（如 hoverRating），然后用该字段生成对应类名（如 stars-3），让 class 控制所有星星的 fill 和 clip-path —— 这样 DOM 不变，transition 就能连贯执行。
- Vue 模板中别写
:style="{ fill: ... }"，改用:class="`star-${index - React 里避免在
map中内联写style={{ fill: ... }}，提取成 className - 如果用了
useTransition或keep-alive，确认没对星星组件做无意义的强制卸载
移动端 click 延迟和 touch 事件穿透问题
在 iOS 上，单纯靠 :active 或 onclick 点击星星，会有约 300ms 延迟，且手指移开后状态可能卡住。更糟的是，如果星星外层套了 label 或 div，touchstart/touchend 顺序错乱会导致「点了没反应」或「点了一颗却亮两颗」。
真实项目里，应该监听 touchstart 立即设置临时状态，touchend 再提交最终值，并阻止默认行为。同时给星星容器加 cursor: pointer 和 -webkit-tap-highlight-color: transparent 消除点击灰块。
- 别依赖
click事件做评分提交，它在快速连点时容易丢失 - 触摸坐标判断用
touches[0].clientX，不是pageX，避免滚动偏移 - 如果用了
pointer-events: none在某层遮罩上，记得星星本身要设pointer-events: auto
过渡效果本身不难，难的是在不同设备、不同框架、不同交互节奏下保持状态准确和动画连贯。最常被忽略的其实是「过渡是否真的发生了」——打开 DevTools 的 Rendering 面板勾选「Paint Flashing」，看亮星时是否有绿色闪动，没有就说明 transition 根本没触发。
