How to implement SVG shading based on the width of another element?

Question

JavaScript

Good day!
There is a ready rating component for Joomla, there is the following html with SVG icons > https://codepen.io/ilya-vins/pen/povVgEw
As you can see, there is such an element

<span class="extravote-stars"> <span id="rating_163_1" class="current-rating" style="width:100%;"></span>

It has the value style="width:100%;" , varies depending on the rating as a percentage. (taken from the database)
I don't have enough knowledge to implement shading of SVG stars depending on style="width:100%;" . Not strong in SVG.
What does it mean:
If style="width:20%;" then 1 asterisk is painted over, if 25%, then one asterisk and part of the second asterisk. Etc.
As you can see, each star is an independent element that you can click on to put down a rating. That is, drawing a general SVG will probably not work here.
What can be done here with minimal alterations? Tell me any crutch, thanks.

Answer 1

You just need to create a so-called sprite - a picture, different parts of which will be displayed as the background of the element, depending on the conditions. Look at the default PNG image that this plugin uses and make an SVG with the same proportions.