星級評定與SVG餐飲小數點評分

-1

我有一些代碼來創建一個星級評分。我以前沒有使用過SVG，我無法弄清楚如何得到它做到以下幾點：星級評定與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顆星，它可以被簡化。

由於

來源

2015-04-28 John

變化從0（未填充的）偏移字段爲1（填充的）移動的評級。

不知道你爲什麼用兩種不同的方式指定紅色，或者你爲什麼略有不同的偏移值。

來源

2015-04-28 13:47:56

說實話，我甚至不知道自己在做什麼，因爲之前沒有做過任何與svg有關的事情。我將如何指定或需要移動什麼值才能將評分改爲類似4.3,4.8等。 – John

繪製更多星星，並使其中的一些完全變紅，您只需要最後一顆星星的漸變。 –

你可以用一些簡單的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，填寫），只是包括正確的。

來源

2015-04-28 13:51:47

那麼setFraction（value）替換了svg偏移量中的什麼？ - 所以這將是評級？不知道你的意思是什麼或如何做定義9個不同的梯度0.1> 0.9？謝謝 – John

setFraction（）設置一顆星的分數。如果你想做4.9這樣的事情，那麼你需要五顆星，並在最後一顆上做一個setFraction（0.9）。 –

對於0.1-> 0。第9件事我的意思是，如果你不想使用JS，你可以創建9個版本的明星，每個版本顯示0.1到0.9的不同分數。然後，您將只包含正確的評分。 –

這裏是撥弄點： 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方法更可靠。

來源

2015-04-28 18:18:15

感謝您的回覆 - 這將如何與JS方法？ – John

基本上是一樣的東西 - 創建一個單擊欄時創建一個百分比值（您可以將其存儲在不可見的文本輸入中），並且還可以水平填充其顏色。然後在它上面放置一個圖像覆蓋層。 –

星級評分是隻讀的，因爲它們是預設的 - 來自數據庫。所以它只是顯示實際的評級頁面 – John

星級評定與SVG餐飲小數點評分

回答

相關問題