Can you make a star path progress bar with transparent background? - html

Question

So i'm making a website and i wanted to try add ratings to items but can't find a way to remove the white background off this path
using font awesome doesnt quite look how i wanted it to so i started looking into svg paths, i found some code that pretty much does what i want but cant figure out how to remove the white fill/background on it
* {
box-sizing: border-box;
}
.rating {
width: 120px;
height: 24px;
position: relative;
background-color: gray;
}
.rating progress.rating-bg {
-webkit-appearance: none;
-moz-appearence: none;
appearance: none;
border: none;
display: inline-block;
height: 24px;
width: 100%;
color: orange;
}
.rating progress.rating-bg::-webkit-progress-value {
background-color: orange;
}
.rating progress.rating-bg::-moz-progress-bar {
background-color: orange;
}
.rating svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<svg style="display:none;">
<defs>
<symbol id="fivestars">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd"/>
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd" transform="translate(24)"/>
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd" transform="translate(48)"/>
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd" transform="translate(72)"/>
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd" transform="translate(96)"/>
</symbol>
</defs>
</svg>
<div class="rating">
<!-- <div class="rating-bg" style="width: 90%;"></div> -->
<progress class="rating-bg" value="4.5" max="5"></progress>
<svg><use xlink:href="#fivestars"/></svg>
</div>