本文介绍一种不依赖 JavaScript、纯 SVG + CSS 的方案，通过 和动态 宽度精确渲染带小数的星级评分（如 3.7 星），支持平滑过渡与响应式缩放。
本文介绍一种不依赖 javascript、纯 svg + css 的方案，通过 `
在构建用户评价系统时，仅用整数星级（如 1–5 颗全亮）会丢失关键精度信息。例如平均分 4.2 星若四舍五入为 4 星，将弱化优质体验；若进位为 5 星，则夸大实际感受。理想的解决方案是让第 5 颗星部分填充——这正是 SVG 掩码（
核心思路是：将 5 颗星作为统一遮罩（mask），再用一个宽度可变的彩色矩形（
以下为完整可复用的 PHP 渲染示例（已适配小数精度）：
<?php
// 假设 $averageRating 是数据库计算出的浮点数，范围 0.0–5.0
$averageRating = min(5.0, max(0.0, (float)$averageRating)); // 安全截断
$percentage = round($averageRating * 20, 2); // 5星 → 100%，故每0.1星=2%；保留2位小数防浮点误差
// 生成SVG字符串（推荐提取为独立函数或模板）
$svg = <<<EOD
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 24" width="120" height="24" aria-label="评分：{$averageRating} 星">
<defs>
<symbol id="star">
<polygon fill="white" points="19.63,7.39,18.58,7.23,17.53,7.06,16.48,6.9,15.77,6.29,15.32,5.33,14.87,4.37,14.42,3.41,13.74,2.6,12.8,2.12,11.75,2.01,10.74,2.3,9.91,2.95,9.36,3.86,8.92,4.82,8.47,5.78,8.02,6.75,7.03,6.98,5.98,7.14,4.93,7.3,3.89,7.51,2.97,8.03,2.32,8.86,2.02,9.87,2.1,10.93,2.56,11.87,3.28,12.65,4.02,13.41,4.76,14.18,5.49,14.94,5.33,15.99,5.16,17.04,4.99,18.08,4.85,19.13,5.03,20.17,5.58,21.07,6.42,21.71,7.44,21.99,8.49,21.86,9.44,21.39,10.36,20.88,11.29,20.36,12.22,20.09,13.15,20.6,14.07,21.12,15,21.64,16,21.98,17.05,21.91,18,21.45,18.72,20.68,19.1,19.69,19.09,18.64,18.92,17.59,18.76,16.54,18.59,15.49,18.85,14.58,19.59,13.82,20.33,13.06,21.06,12.29,21.7,11.45,21.99,10.43,21.88,9.38,21.41,8.44,20.62,7.74"/>
</symbol>
<mask id="starMask">
<use href="#star" transform="translate(0 0)"/>
<use href="#star" transform="translate(24 0)"/>
<use href="#star" transform="translate(48 0)"/>
<use href="#star" transform="translate(72 0)"/>
<use href="#star" transform="translate(96 0)"/>
</mask>
</defs>
<rect x="0" y="0" width="{$percentage}%" height="100%" fill="#fdb813" mask="url(#starMask)" />
<!-- 可选：叠加灰色空星作为背景，增强对比 -->
<g fill="#bdbdbd">
<use href="#star" transform="translate(0 0)"/>
<use href="#star" transform="translate(24 0)"/>
<use href="#star" transform="translate(48 0)"/>
<use href="#star" transform="translate(72 0)"/>
<use href="#star" transform="translate(96 0)"/>
</g>
</svg>
EOD;
echo $svg;
?>✅ 关键优势说明：
- 零 JS 依赖：纯服务端渲染，SEO 友好，首屏即刻显示；
- 像素级精度：$percentage = $averageRating * 20 确保 0.1 星 = 2% 宽度，无取整失真；
- 无障碍友好：添加 aria-label 明确传达语义；
- 样式可控：通过 fill 属性自由切换高亮色与灰阶色，无需修改路径数据；
- 响应式就绪：viewBox + width/height 属性天然支持缩放，适配 Retina 屏。
⚠️ 注意事项：
- 务必对 $averageRating 做边界校验（min/max），防止负值或超 5 星导致 width 异常；
- 若需动画效果（如评分加载时渐显），可在
上添加 CSS transition: width 0.3s ease，并配合内联样式或外部类； - 所有
- 浏览器兼容性良好（Chrome/Firefox/Safari/Edge ≥ 2015），无需 Polyfill。
此方案将复杂的小数星级逻辑下沉至 SVG 渲染层，既保持了 PHP 后端的简洁性，又交付了专业级的视觉精度——是构建可信评价系统的稳健选择。
