I have this code to show stars from a decimal.
.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">
<progress class="rating-bg" value="4.9" max="5"></progress>
<svg><use xlink:href="#fivestars"/></svg>
</div>
https://codepen.io/ppolp/pen/mdQyezW
It works but I’m trying to figure out how to remove the white rectange bg from the stars. Anyone able to point me in the right direction?
Thanks.
2
Answers
FYI, you can wrap it all in a native JavaScript (JSWC) Web Component:
It is way easier if you create all SVG client-side, using a Custom Element (supported in all modern Browsers):
viewBox/grid
M0 0h100v100h-100v-100
to the path0 0 N 100
viewBox to fit all stars.. see belowonclick
andonmouseover
on every "half-star"Good idea to use the
<progress>
element. Instead of laying the progress bar and the SVG on top of each other you can use an SVG as a mask on the progress bar. Here I defined a star mask that will be a mask for just one star and masked off five rectangles in another mask. This mask can then be applied to the progress bar.I took the freedom to construct the star instead of using a path. When using masks like in this example it doesn’t matter.