最终效果图
使用的方法是先使用五个星星svg图案,之后计算出亮的星星的宽度覆盖在原来星星的上面
<template>
<div class="rating_container">
<!-- 一共五颗星 -->
<section class="star_container">
<svg class="grey_fill" v-for="num in 5" :key="num">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>
</svg>
</section>
<!-- 计算评分计算亮星星的宽度 -->
<div :style="'width:'+ rating*2/5 + 'rem'" class="star_overflow" >
<section class="star_container">
<svg class="orange_fill" v-for="num in 5" :key="num">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>
</svg>
</section>
</div>
</div>
</template>
黄色星星的宽度 = 评分*总宽度/星星颗数 = rating*2/5 //这里星星总宽度是2rem
样式如下
.rating_container{
position: relative;
top: .2rem;
@include wh(2rem, .4rem);
.star_overflow{
overflow: hidden;
position: absolute;
height: 100%;
}
.star_container{
position: absolute;
display: flex;
width: 2rem;
height: 0.4rem;
top: -0.02rem;
left: -0.02rem;
.grey_fill{
fill: #d1d1d1;
}
.orange_fill{
fill: #ff9a0d;
}
}
}