我正在使用它,并希望在星级选定的类中添加一个新的css类'half',只用背景颜色填充一半的星形:#e54800
https://foundation.zurb.com/building-blocks/blocks/star-rating.html
所以它会是:<xsl:template match="Box[@ury != preceding-sibling::Box/@ury]/Text">
<xsl:copy><xsl:apply-templates/></xsl:copy>
</xsl:template>
<div class="star selected half">
CSS:
<div class="rating-block">
<div class="rating-block-rating" data-rating>
<div class="star selected">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
</div>
</div>
答案 0 :(得分:1)
您可以使用另一个svg定义渐变(以避免在每个svg中重复它)并使用带有fill
的渐变。如果您想要不同的其他fill
.rating-block {
padding: 2px 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.rating-block .ratings-type {
margin-right: 1rem;
margin-bottom: 0;
}
.rating-block .rating-block {
display: flex;
align-items: center;
margin-bottom: 2rem;
}
.rating-block .rating-block-rating {
display: flex;
}
.rating-block .star {
cursor: pointer;
stroke: #cc4b37;
}
.rating-block .rating-block-rating .star.selected polygon {
fill: #cc4b37;
}
.rating-block .rating-block-rating .star.half polygon {
fill: url(#grad);
}
.rating-block .rating-block-rating.is-voted .star polygon {
fill: #cc4b37;
}
.rating-block .rating-block-rating.is-voted .star.selected~.star polygon {
fill: transparent;
}
<svg height="0" width="0">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#cc4b37;stop-opacity:1" />
<stop offset="50%" style="stop-color:#cc4b37;stop-opacity:1" />
<stop offset="50%" style="stop-color:transparent;stop-opacity:1" />
<stop offset="100%" style="stop-color:transparent;stop-opacity:1" />
</linearGradient>
</defs>
</svg>
<div class="rating-block">
<div class="rating-block-rating" data-rating>
<div class="star selected">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star half">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
</div>
</div>
顺便说一下,这是一种处理评级的简单方法,无需多次使用svg并为填充定义渐变。您可以使用svg作为背景并简单地控制宽度来控制评级:
.rating{
width: calc(45px * 5);
height: 45px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="-40 -40 80 80"><path fill="%23cc4b37" stroke="%23cc4b37" stroke-width="2" d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
position:relative;
}
.rating:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width: calc(45px * 5);
z-index:-1;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="-40 -40 80 80"><path fill="transparent" stroke="%23cc4b37" stroke-width="2" d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
}
<div class="rating">
</div>
<div class="rating" style="width:calc(45px * 2)">
</div>
<div class="rating" style="width:calc(45px * 2.5)">
</div>
<div class="rating" style="width:calc(45px * 4.75)">
</div>
<div class="rating" style="width:calc(45px * 1.75)">
</div>
还可以使用CSS变量进行改进:
.rating{
width: calc(45px * 5);
height: 45px;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="-40 -40 80 80"><path fill="transparent" stroke="%23cc4b37" stroke-width="2" d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
position:relative;
}
.rating:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width: calc(45px * var(--r,1));
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="-40 -40 80 80"><path fill="%23cc4b37" stroke="%23cc4b37" stroke-width="2" d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
}
<div class="rating">
</div>
<div class="rating" style="--r:2">
</div>
<div class="rating" style="--r:2.5">
</div>
<div class="rating" style="--r:4.75">
</div>
<div class="rating" style="--r:1.75">
</div>