Alpine.js如何通过数组设置HTML标签属性实现星级评分

两个错误导致效果不符合预期：

• SVG的id是全局唯一的，你循环生成的5个渐变全部用了同一个id grad，浏览器只会读取第一个出现的#grad渐变配置，后面所有星星引用url(#grad)都会复用第一颗星的60%填充规则，自然全部显示60%填充。
• 渐变stop的顺序和逻辑写反了：线性渐变按offset从小到大渲染，你把黄色stop放在前面、灰色stop固定在offset=0%，本身渐变逻辑就不成立，就算id不重复也出不了硬切的部分填充效果。

1. 给每个渐变拼接循环index生成唯一id，每个星星只引用自己对应的渐变，避免id冲突
2. 修正渐变stop规则：0到填充比例位置显示黄色，填充比例到100%位置显示灰色，同位置设置两个不同颜色的stop实现硬切，不要渐变过渡
3. 统一offset值的格式，全部带%单位，避免解析异常

修复后可直接运行的代码：

<template x-for="(offset, index) in percentage" :key="index">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
    <defs>
        <linearGradient :id="`star-grad-${index}`">
            <stop offset="0%" stop-color="yellow"/>
            <stop :offset="offset" stop-color="yellow"/>
            <stop :offset="offset" stop-color="gray"/>
            <stop offset="100%" stop-color="gray"/>
        </linearGradient>
    </defs>
    <path :fill="`url(#star-grad-${index})`" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg> 
</template>

对应2.3/5的评分，生成的percentage数组为['100%', '100%', '30%', '0%', '0%']即可实现需求；传入['60%', '0%', '0%', '0%', '0%']时，就会只有第一颗星填充60%，其余星星全灰。

内容的提问来源于stack exchange，提问作者Akshay Kumar