I am new in alpine js, I am trying to fill five star like rating(2.3 out of 5 means 2 star full fill and 3rd one filled by 30%, rest should be empty) while I set offset value like in the given below code then it fills all star by 1st value of percentage:['60', '0%', '0%', '0%', '0%'] while it should fill 1st star 60% rest by 0% but it fills all as 60% :
<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="grad">
<stop x-bind:offset="offset" :key="index" stop-color="yellow"/>
<stop offset="0%" stop-color="gray"/>
</linearGradient>
</defs>
<path fill="url(#grad)" 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>
You need to use x-bind directive at offset attribute to set it dynamically. Inside an Alpine.js directive we can use regular JS code, so we can append the percent sign after the percent value using template literals. Furthermore, we need to generate a unique id for each linearGradient definition, otherwise the first would be applied to each of the SVG element.
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{percentage: [20, 40, 60, 80, 100]}">
<template x-for="element in percentage">
<svg style="height: 20px; width: 20px;" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<defs>
<linearGradient :id="`grad-${element}`">
<stop :offset="`${element}%`" stop-color="yellow" />
<stop offset="0%" stop-color="gray" />
</linearGradient>
</defs>
<path :fill="`url(#grad-${element})`"
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>
</div>Note: remove the style="height: 20px; width: 20px;", I added it only for SO code snippet.