使用 CSS 控制额定填充率

Posted 2023-05-09

【中文标题】使用 CSS 控制额定填充率

【英文标题】：Controling RatedFill in RateYo using CSS

【发布时间】：2018-01-28 10:04:30

【问题描述】：

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

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

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

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

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

我尝试了一些简单的东西，比如

.rating svg 
    fill: $blue3;

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

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

【参考方案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>

【讨论】：

伴侣，你是一个绝对的传奇。我错过了有两个单独的容器，一个用于普通星星，一个用于额定星星。衷心感谢您的帮助！我会尽快奖励赏金...

@MaximGershkovich 非常乐意提供帮助！ :)

【参考方案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>