How to fill an svg image with specific length color

Question

I need to implement star ratings in my app. But the designer only provided a border star image as attached. Now i need to repeat the svg and at the same time fill it according to the ratings as shown in second attached image. But I am not sure if filling the svg with specific width color is possible or not. I don't need full solution, any reference or concept answer is also welcome. the provided star svg and the implementation needeed The provided SVG code

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9.177 7.72a.5.5 0 0 1-.376.273l-5.309.771a.5.5 0 0 0-.277.853l3.841 3.745a.5.5 0 0 1 .144.442l-.907 5.288a.5.5 0 0 0 .726.527l4.748-2.497a.5.5 0 0 1 .466 0l4.748 2.497a.5.5 0 0 0 .726-.527l-.907-5.288a.5.5 0 0 1 .143-.442l3.842-3.745a.5.5 0 0 0-.277-.853l-5.309-.771a.5.5 0 0 1-.376-.274l-2.375-4.81a.5.5 0 0 0-.896 0l-2.375 4.81zM12 6.52l-1.03 2.084a2.5 2.5 0 0 1-1.88 1.368l-2.302.334 1.665 1.624a2.5 2.5 0 0 1 .72 2.212l-.394 2.292 2.059-1.082a2.5 2.5 0 0 1 2.326 0l2.059 1.082-.393-2.292a2.5 2.5 0 0 1 .718-2.212l1.666-1.624-2.302-.334a2.5 2.5 0 0 1-1.882-1.368L12 6.52z" clip-rule="evenodd"/></svg>

Answer 1

Here are two quick hack solutions, both of which require modification of the SVG (and both of which could be modified in a more efficient way), and both of which use a gradient fill , the same basic idea that Robert Longson suggested above.

1. duplicate the path, fill with gradient

1. Duplicate the path so you have one copy for the border and one copy for the fill.
2. Remove the fill-rule="evenodd" from the first path so the interior isn't subtracted, thus getting filled too.
3. Fill the first path (the "back" one) with a gradient that uses hard stops to achieve your partial fill. (I've used orange here just so you can see which is which.)

You could fiddle with the specifics of the gradient to get it exactly where you want it of course. This is just a proof of concept.

 svg { max-width: 200px; /* not relevant */ }.stop1 { stop-color: orange; }.stop2 { stop-opacity: 0; } path.fill { fill: url(#gradient-fill); }

 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"> <defs> <linearGradient id="gradient-fill" x1="0" x2="1" y1="1" y2="0.5"> <stop class="stop1" offset="70%"/> <stop class="stop2" offset="70%"/> </linearGradient> </defs> <path class="fill" d="M9.177 7.72a.5.5 0 0 1-.376.273l-5.309.771a.5.5 0 0 0-.277.853l3.841 3.745a.5.5 0 0 1.144.442l-.907 5.288a.5.5 0 0 0.726.527l4.748-2.497a.5.5 0 0 1.466 0l4.748 2.497a.5.5 0 0 0.726-.527l-.907-5.288a.5.5 0 0 1.143-.442l3.842-3.745a.5.5 0 0 0-.277-.853l-5.309-.771a.5.5 0 0 1-.376-.274l-2.375-4.81a.5.5 0 0 0-.896 0l-2.375 4.81zM12 6.52l-1.03 2.084a2.5 2.5 0 0 1-1.88 1.368l-2.302.334 1.665 1.624a2.5 2.5 0 0 1.72 2.212l-.394 2.292 2.059-1.082a2.5 2.5 0 0 1 2.326 0l2.059 1.082-.393-2.292a2.5 2.5 0 0 1.718-2.212l1.666-1.624-2.302-.334a2.5 2.5 0 0 1-1.882-1.368L12 6.52z"/> <path fill-rule="evenodd" d="M9.177 7.72a.5.5 0 0 1-.376.273l-5.309.771a.5.5 0 0 0-.277.853l3.841 3.745a.5.5 0 0 1.144.442l-.907 5.288a.5.5 0 0 0.726.527l4.748-2.497a.5.5 0 0 1.466 0l4.748 2.497a.5.5 0 0 0.726-.527l-.907-5.288a.5.5 0 0 1.143-.442l3.842-3.745a.5.5 0 0 0-.277-.853l-5.309-.771a.5.5 0 0 1-.376-.274l-2.375-4.81a.5.5 0 0 0-.896 0l-2.375 4.81zM12 6.52l-1.03 2.084a2.5 2.5 0 0 1-1.88 1.368l-2.302.334 1.665 1.624a2.5 2.5 0 0 1.72 2.212l-.394 2.292 2.059-1.082a2.5 2.5 0 0 1 2.326 0l2.059 1.082-.393-2.292a2.5 2.5 0 0 1.718-2.212l1.666-1.624-2.302-.334a2.5 2.5 0 0 1-1.882-1.368L12 6.52z"/> </svg>

2. Same idea but with the inner and outer paths separated.

(If you're going to go this route you could just as easily create a path to define the shape of the fill.)

 svg { max-width: 200px; /* not relevant */ }.stop1 { stop-color: orange; }.stop2 { stop-color: white; } path.inner { fill: url(#gradient-fill); }

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <defs> <linearGradient id="gradient-fill" x1="0" x2="1" y1="1" y2="0.5"> <stop class="stop1" offset="70%"/> <stop class="stop2" offset="70%"/> </linearGradient> </defs> <path class="outer" d="M9.18,8.57C9.1,8.71,8.96,8.82,8.8,8.84L3.49,9.61C3.22,9.65,3.03,9.9,3.07,10.18 c0.02,0.11,0.07,0.21,0.15,0.29l3.84,3.74c0.12,0.11,0.17,0.28,0.14,0.44l-0.91,5.29c-0.05,0.27,0.14,0.53,0.41,0.58 c0.11,0.02,0.22,0,0.32-0.05l4.75-2.5c0.15-0.08,0.32-0.08,0.47,0l4.75,2.5c0.24,0.13,0.55,0.04,0.68-0.21 c0.05-0.1,0.07-0.21,0.05-0.32l-0.91-5.29c-0.03-0.16,0.03-0.33,0.14-0.44l3.84-3.74c0.2-0.19,0.2-0.51,0.01-0.71 c-0.08-0.08-0.18-0.13-0.29-0.15L15.2,8.84c-0.16-0.02-0.3-0.13-0.38-0.27l-2.38-4.81c-0.12-0.25-0.42-0.35-0.67-0.23 c-0.1,0.05-0.18,0.13-0.23,0.23L9.18,8.57L9.18,8.57z"/> <path class="inner" d="M12,7.37l-1.03,2.08c-0.36,0.74-1.07,1.25-1.88,1.37l-2.3,0.33l1.66,1.62c0.59,0.57,0.86,1.4,0.72,2.21 l-0.39,2.29l2.06-1.08c0.73-0.38,1.6-0.38,2.33,0l2.06,1.08l-0.39-2.29c-0.14-0.81,0.13-1.64,0.72-2.21l1.67-1.62l-2.3-0.33 c-0.81-0.12-1.52-0.63-1.88-1.37L12,7.37z"/> </svg>