使用 CSS 控制额定填充率

Question

我在我的应用程序中使用了一个很棒的小 jQuery 插件 RateYo。

它使用 SVG 作为创建星星的方法，这显然是对使用图像的传统方法的巨大改进，但是它似乎阻止了使用 CSS 来控制评级星星的颜色。

因此您可以轻松地执行以下操作：

$("#rateYo").rateYo({
    normalFill: "#A0A0A0",
    ratedFill: "#F39C12"
});

但是出于显而易见的原因，我想通过 CSS 而不是 JavaScript 来控制这些参数。

我试过像

这样简单的东西

.rating svg {
    fill: $blue3;
}

这确实改变了星星的颜色，但它也阻止了控件的正常运行，因为它将所有星星的颜色固定为 CSS 中提供的填充颜色。

所以，任何人都可以就如何通过 CSS 而不是 JavaScript 来控制 ratedFill 参数提供任何建议吗？

Answer 1

通过检查 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>

Answer 2

我还为答案的有用性添加了其他选项。

$(".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>

使用 CSS 控制额定填充率

Controling RatedFill in RateYo using CSS

javascript

jquery

css

jquery-plugins

rateyo