Question

我有一些代码可以创建星级评分。我以前没有使用SVG，我无法弄清楚如何让它做到以下几点：

评分超过5
以小数位显示评分，即：4.5,3.2,1.1以及全明星
额定星星需要为黄色，星星需要为灰色

如何以及如何更改示例以左右移动星级评分以显示满足小数的星星？

代码：

<svg height="210" width="500" 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颗星，可以简化。

由于

Answer 1

您可以使用一些简单的JS调整<linearGradient>。示例如下。

function setFraction(fraction)
{
    document.getElementById("stop1").setAttribute("offset", fraction);
    document.getElementById("stop2").setAttribute("offset", fraction);
}


setFraction(0.4);

<svg height="210" width="500">
  <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，填充），并且只包括正确的版本。

Answer 2

这里是点小提琴： http://jsfiddle.net/cnLHE/296/

您可以在蒙版元素下放置一个矩形。在这个小提琴中，矩形宽度= 90，即90％（在最底部）。

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

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

警告：我废弃了这种方法，因为它在页面中的20多个实例中效果不佳。例如，在加载额定产品的网格时，评级图形有时会在Chrome中消失。 JS方法更可靠。

Answer 3

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

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

星级评分，SVG符合小数点评分

3 个答案: