与SVG餐饮小数点等级星级 [英] Star Rating with SVG catering for decimal point rating

问题描述

我有一些code创建一个星级。我以前没有使用过SVG，我无法弄清楚如何得到它做到以下几点：

• 评级超出5
的

• 有小数位，即显示评分：4.5，3.2，1.1以及整颗


• 额定明星必须是黄色的，剩下的明星需要被灰色

如何？我改变对例如移动星级剩下什么，右得到它不显示星餐饮为小数？

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

code：

 ＆LT; SVG HEIGHT =210WIDTH =500补=URL（＃G）＆GT;
      ＆LT;多边形点=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的风格=行程：红色;/＆GT;
    ＆所述;的LinearGradient Y2 =0.9733×2 =1ID =GX1 =0.0167Y1 =0.9833＆GT;
＆LT;停止 - 彩色=＃F00偏移量=0.4733/＆GT;
＆LT;停止 - 色=RGB（255，255，255）偏移量=0.5033/＆GT;
＆LT; /＆的LinearGradient GT;
    ＆LT; / SVG＆GT;
 

附code - 这一切需要的？由于将有5星总，能不能简化。

感谢

解决方案

您可以调整＆LT;＆的LinearGradient GT; 有一些简单的JS。下面的例子。

\r

\r

函数setFraction（分数）\r
{\r
    的document.getElementById（停止1）的setAttribute（抵消，分数）。\r
    的document.getElementById（停止2）的setAttribute（抵消，分数）。\r
}\r
\r
\r
setFraction（0.4）;

\r

＆LT; SVG HEIGHT =210WIDTH =500＆GT;\r
  ＆LT;多边形点=165.000，185.000，188.511，197.361，184.021，171.180，\r
 203.042，152.639，\r
 176.756，148.820，\r
 165.000，125.000，\r
 153.244，148.820，\r
 126.958，152.639，\r
 145.979，171.180，\r
 141.489，197.361，\r
 165.000，185.000的风格=行程：红色;填写：网址（＃G）/＆GT;\r
  ＆所述;的LinearGradient ID =G×1 =0Y1 =0×2 =1Y2 =0＆GT;\r
    ＆LT;停止ID =停止1停止色=＃F00偏移量=0.5/＆GT;\r
    ＆LT;停止ID =停止2停止色=＃FFF偏移量=0.5/＆GT;\r
  ＆LT; /＆的LinearGradient GT;\r
＆LT; / SVG＆GT;

\r

\r

\r

如果你想避免JS，那么你可以创建11个不同版本的明星（未填充，0.1，0.2〜0.9，填写），只包括正确的。

I have some code to create a star rating. I have not used SVG before and I can't figure out how to get it to do the following:

• Rating is out of 5
• Display ratings with decimal place ie: 4.5, 3.2, 1.1 as well as whole stars
• Rated stars need to be yellow, stars remaining need to be grey

How and what do I change on the example to move the star rating left and right to get it do display the stars catering for decimals?

Fiddle example: http://jsfiddle.net/apbuc773/10/

Code:

<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>

The code attached - is all this needed? As there will be 5 stars in total, can it be simplified.

Thanks

解决方案

You can adjust the <linearGradient> with some simple JS. Example below.

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>

If you wanted to avoid JS, then you could create 11 different versions of the star (unfilled, 0.1, 0.2 ... 0.9, filled) and just include the correct one.

这篇关于与SVG餐饮小数点等级星级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！