带有 SVG 的星级评分可满足小数点评分

Posted 2023-03-05

【中文标题】带有 SVG 的星级评分可满足小数点评分

【英文标题】：Star Rating with SVG catering for decimal point rating

【发布时间】：2015-07-07 09:41:09

【问题描述】：

我有一些代码可以创建星级。我以前没有使用过 SVG，我不知道如何让它执行以下操作：

评分低于 5 分 显示带有小数位的评分，即：4.5、3.2、1.1 以及整颗星 已评级的星星需要为黄色，剩余的星星需要为灰色

如何以及如何更改示例以左右移动星级评分以使其显示适合小数的星星？

小提琴示例： http://jsfiddle.net/apbuc773/10/

代码：

<svg   fill="url(#g)">
      <polygon points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
 203.042, 152.639,
 176.756, 148.820,
 165.000, 125.000,
 153.244, 148.820,
 126.958, 152.639,
 145.979, 171.180,
 141.489, 197.361,
 165.000, 185.000" style="stroke: red;"/>
    <linearGradient y2="0.9733" x2="1" id="g" x1="0.0167" y1="0.9833">
<stop stop-color="#F00" offset="0.4733"/>
<stop stop-color="rgb(255, 255, 255)" offset="0.5033"/>
</linearGradient>
    </svg>

附上的代码 - 这一切都需要吗？总共会有5颗星，能不能简化一下。

谢谢

【参考方案1】：

你可以用一些简单的JS来调整<linearGradient>。下面的例子。

function setFraction(fraction)

    document.getElementById("stop1").setAttribute("offset", fraction);
    document.getElementById("stop2").setAttribute("offset", fraction);



setFraction(0.4);

<svg  >
  <polygon points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
 203.042, 152.639,
 176.756, 148.820,
 165.000, 125.000,
 153.244, 148.820,
 126.958, 152.639,
 145.979, 171.180,
 141.489, 197.361,
 165.000, 185.000" style="stroke:red; fill:url(#g)"/>
  <linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
    <stop id="stop1" stop-color="#F00" offset="0.5"/>
    <stop id="stop2" stop-color="#fff" offset="0.5"/>
  </linearGradient>
</svg>

如果您想避免使用 JS，那么您可以创建 11 个不同版本的星号（未填充、0.1、0.2 ... 0.9、已填充）并只包含正确的一个。

【讨论】：

那么 setFraction(value) 是否替换了 svg 偏移量中的内容？ - 所以这将是评级？不确定您的意思或如何定义 9 个不同的渐变 0.1 > 0.9？谢谢

setFraction() 设置一颗星的分数。如果你想做类似 4.9 的事情，那么你需要 5 颗星并在最后一个上执行 setFraction(0.9)。

对于 0.1->0.9 的东西，我的意思是如果你不想使用 JS，你可以创建九个版本的星星，每个版本显示从 0.1 到 0.9 的不同分数。然后，您只需包含正确的评分即可。

【参考方案2】：

这是带点的 Fiddle： http://jsfiddle.net/cnLHE/296/

您可以在被遮罩的元素下方放置一个矩形。在这个 Fiddle 中，矩形是 width=90，即 90%（在最底部）。

<rect x="0" y="0"   style="fill:#2498c7; mask: url(#mask5)"/>

例如，将 90 更改为 55，底层填充将缩小宽度。

警告：我放弃了这个方法，因为它不能很好地处理页面中的 20 多个实例。例如，在加载评级产品网格时，评级图形有时会在 Chrome 中消失。 JS 方法更可靠。

【讨论】：

感谢您的回复 - 这将如何与 js 方法一起使用？

本质上是一样的——创建一个在点击时创建一个百分比值的栏（你可以将它存储在一个不可见的文本输入中），并且水平填充它的颜色。然后在其上方放置一个图像叠加层。

星级是只读的，因为它们是预先设定的——来自数据库。所以它只是在页面上显示实际评分

所有的svg代码是什么意思？如：userSpaceOnUse，填充白色/黑色，为什么每个圆圈不同有不同的代码和值？

这里是他们的链接：developer.mozilla.org/en-US/docs/Web/SVG/Attribute 我认为 userSpaceOnUse 只是建立模式单元，所以它知道开始时使用哪个坐标。

【参考方案3】：

将偏移字段从 0（未填充）更改为 1（已填充）以移动评分。

不知道您为什么以两种不同的方式指定红色，或者为什么您的偏移值略有不同。

【讨论】：

老实说，我什至不确定自己在做什么，因为我之前没有对 svg 做过任何事情。我将如何指定或需要移动什么值才能将评级更改为 4.3、4.8 等。

多画一些星星，让其中一些完全变红，最后的星星只需要一个渐变。