使用 CSS 控制额定填充率
Controling RatedFill in RateYo using CSS
我在我的应用程序中使用了一个很棒的小 jQuery 插件 RateYo。
它使用 SVG 作为创建星星的方法,这显然是对使用图像的传统方法的巨大改进,但是它似乎阻止了使用 CSS 来控制评级星星的颜色。
因此您可以轻松地执行以下操作:
$("#rateYo").rateYo({
normalFill: "#A0A0A0",
ratedFill: "#F39C12"
});
但是出于显而易见的原因,我想通过 CSS 而不是 JavaScript 来控制这些参数。
我试过像
这样简单的东西
.rating svg {
fill: $blue3;
}
这确实改变了星星的颜色,但它也阻止了控件的正常运行,因为它将所有星星的颜色固定为 CSS 中提供的填充颜色。
所以,任何人都可以就如何通过 CSS 而不是 JavaScript 来控制 ratedFill
参数提供任何建议吗?
通过检查 RateYo 创建的标记,您可以找到相关的 类 并定位它们。
这是一个活生生的例子:
$(function() {
$(".rating").rateYo({
rating: 2.5
});
});
.rating .jq-ry-normal-group svg {
fill: silver;
}
.rating .jq-ry-rated-group svg {
fill: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<div class="rating"></div>
我还为答案的有用性添加了其他选项。
$(".rateyo").rateYo();
#rateyo1 .jq-ry-normal-group svg
{
fill:purple;
stroke:lime;
stroke-width:20;
}
#rateyo1 .jq-ry-rated-group svg
{
fill:lime;
stroke:purple;
stroke-width:20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<div>
<div id="rateyo1" class="rateyo"
data-rateyo-rating="1.5"
data-rateyo-num-stars="5">
</div>
</div>
我在我的应用程序中使用了一个很棒的小 jQuery 插件 RateYo。
它使用 SVG 作为创建星星的方法,这显然是对使用图像的传统方法的巨大改进,但是它似乎阻止了使用 CSS 来控制评级星星的颜色。
因此您可以轻松地执行以下操作:
$("#rateYo").rateYo({
normalFill: "#A0A0A0",
ratedFill: "#F39C12"
});
但是出于显而易见的原因,我想通过 CSS 而不是 JavaScript 来控制这些参数。
我试过像
这样简单的东西.rating svg {
fill: $blue3;
}
这确实改变了星星的颜色,但它也阻止了控件的正常运行,因为它将所有星星的颜色固定为 CSS 中提供的填充颜色。
所以,任何人都可以就如何通过 CSS 而不是 JavaScript 来控制 ratedFill
参数提供任何建议吗?
通过检查 RateYo 创建的标记,您可以找到相关的 类 并定位它们。
这是一个活生生的例子:
$(function() {
$(".rating").rateYo({
rating: 2.5
});
});
.rating .jq-ry-normal-group svg {
fill: silver;
}
.rating .jq-ry-rated-group svg {
fill: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<div class="rating"></div>
我还为答案的有用性添加了其他选项。
$(".rateyo").rateYo();
#rateyo1 .jq-ry-normal-group svg
{
fill:purple;
stroke:lime;
stroke-width:20;
}
#rateyo1 .jq-ry-rated-group svg
{
fill:lime;
stroke:purple;
stroke-width:20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<div>
<div id="rateyo1" class="rateyo"
data-rateyo-rating="1.5"
data-rateyo-num-stars="5">
</div>
</div>