Rating stars on svg
Good day! wanted to know how to fix svg rating issue.
1) Filling the stroke with a different color than specified in the styles
2) Clipping stroke along with the star
3) The offset of the gradient is different from the example with 5 stars
https://codepen.io/Mister-Eighth/pen/KKGgPPp
2 Replies
The issue is the gradient is following the width.
there might be a more elegant solution out there from people who know SVGs better than me, but a simple clip-path should work 🤷
Here is a basic example where it's pretty manual: https://codepen.io/kevinpowell/pen/BaqLaxd?editors=1100
Clip paths are a bit hard to read though, so we can make it a little more clear by using a custom property: https://codepen.io/kevinpowell/pen/OJBRJwj?editors=1100
And if we're using custom properties, then we might as well just leverage JS so we never have to do the math ourselves:
https://codepen.io/kevinpowell/pen/MWPjWzZ
(there could be a non-JS solution to this last option one day, but at the moment, we'd need it if you want to go that route)
Thank you so much Kevin. Didn't expect a response from you, pleasantly surprised. Thank you for your support, I sincerely admire you and your creativity and skill. I wish you good health and further success in your business)