纯css实现五角星评分hover动效的关键是用unicode字符★/☆配合radio+label结构、兄弟选择器~控制悬停联动，而非画星；clip-path比scalex更精准裁剪，但半星需js介入计算位置。
直接说结论：用纯 CSS 实现五角星评分 Hover 动效，关键不是画星，而是控制 :hover 时的 clip-path 或 background-clip + linear-gradient 渐变遮罩，配合兄弟选择器（~）实现“悬停某颗星，前面全亮”的逻辑。SVG 方案更稳但略重；纯 Unicode + font-size 变色最轻量，但无法做半星或渐变动效。
怎么用 Unicode 字符快速搭出可交互的五颗星
不用画路径、不引入 SVG，靠系统自带的 ★ 和 ☆ 字符就能起步。核心是把它们放进 <label></label> 或带 role="button" 的 <span></span>，再用隐藏的 <input type="radio"> 绑定点击状态。
- 每颗星用一个
<input type="radio">+<label></label>包裹 Unicode 星号，name相同保证单选 - 用
input:checked ~ label控制已选星及之前所有星的颜色（比如color: #ffc107） - Hover 时只改当前
label:hover和它前面所有label的颜色，需配合~和相邻兄弟选择器+拼接 - 注意：Unicode 星号在不同系统/字体下粗细不一，加
font-family: "Segoe UI", "Apple Color Emoji", sans-serif提升一致性
<div class="star-rating"> <input type="radio" id="star5" name="rating" value="5"><label for="star5">★</label> <input type="radio" id="star4" name="rating" value="4"><label for="star4">★</label> <!-- ... --> </div>
为什么用 clip-path 做 Hover 填充比 transform: scaleX() 更可靠
transform: scaleX() 看似简单，但星形轮廓不规则，水平缩放会导致尖角变形、边缘模糊；而 clip-path: polygon() 可以精准裁剪出“从左到右逐步填满”的五角星区域，Hover 时只改 clip-path 的 x 坐标比例即可。
- 先用 SVG 定义一颗标准五角星，导出
path的d属性，再转成clip-path: polygon(...)坐标（推荐用 clippy 工具辅助） - 给每个星加
data-index="1"到5，Hover 时用 JS 动态设style.clipPath，或用 CSS 自定义属性（--fill）配合calc()计算裁剪比例 - 纯 CSS 方案中，必须为每颗星写 5 组 hover 规则，例如
.star:nth-child(3):hover ~ .star, .star:nth-child(3):hover表示“悬停第 3 颗时，第 1–3 颗生效” - 注意：
clip-path在 Safari 旧版本需加-webkit-clip-path前缀，且不能动画polygon()坐标（得用inset()或circle()才能过渡）
遇到 Uncaught TypeError: Cannot read property 'getBBox' of null 怎么办
这个错误通常出现在你用 JS 获取 SVG 元素的 getBBox() 却没等 DOM 加载完，或者选错了元素（比如选了 <use></use> 而非原始 <symbol></symbol>）。但如果你压根没写 JS —— 那大概率是复制了某段依赖 SVG id 引用的 CSS，却漏掉了对应的 <svg><defs><symbol></symbol></defs></svg> 块。
- 检查 HTML 是否包含完整的 SVG 定义，且
<use href="#star"></use>中的#star和<symbol id="star"></symbol>严格匹配（大小写、空格、连字符） - 避免在 CSS 里写
mask: url(#star-mask)却没定义<mask id="star-mask"></mask> - 如果只是想动效简单点，直接放弃 SVG，退回 Unicode +
color+transition组合，transition: color 0.2s足够顺滑 - 真要用 SVG，优先内联（不要 external SVG），并确保
<symbol></symbol>在开头或的<svg></svg>里，避免加载时机问题
真正难的不是让星亮起来，而是让“半星”在鼠标移入过程中平滑过渡——这基本要靠 JS 计算鼠标相对位置 + 动态更新 clip-path 或背景渐变的 stop 位置。CSS 本身没有“鼠标在元素内 X% 处”这样的伪类，所以 Hover 动效一旦要求精度，就得接受 JS 的介入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
