前端早讀課 - 【第2664期】使用SVG和CSS製作一個評星組件－鑽石舞台

前言

以前還蠻常見的組件，這種利用 svg 實現的方式可以看看。今日前端早讀課文章由 @jacob_three 翻譯分享。

正文從這開始～～

在【第2663期】你不知道的SVG中的利用SVG五星制打分效果，這篇來了。

不使用圖片，如何構建一個星級 / 評級組件，支持像 4.2 或 3.7 這樣的小數值？這篇文章教你如何只使用 CSS 和內聯 svg，來製作評級分數星星組件。

在一個電商公司工作，最近有個需求，需要做一個組件來顯示客戶評級。老版本用的是多個 png 圖片疊加在一起，導致了不必要的請求和 CLS 問題。新組件的標準是:

使用內聯 SVG 而不是圖片；

星星的數量支持動態；

需要支持小數值；

最終組件

下面是我們的組件

圖

代碼：

import IconStar from 'star.svg'; const Rating = ({ value, max, className }) => { /* 計算星星有多少需要被覆蓋 */ const percentage = Math.round((value / max) * 100); return ( <div className={styles.container}> { /* 用map渲染一個基於最大評分值的 IconStar 數組 */ } {Array.from(Array(max).keys()).map((_, i) => ( <IconStar key={i} className={styles.star} /> ))} { /* 把div放到星星組件的上面，用來遮住不需要顯示的部分 */ } <div className={styles.overlay} style={{ width: `${100 - percentage}%` }} /> </div> ); }

組件由兩部分組成:

基於最大評分星級的 SVG 圖標列表 (參數 max);

一個覆蓋在星星上的 div，負責改變下面的星星的顏色。這就是小數部分工作的魔力。

覆蓋在上面就是個普通的 div，大小和下面不同的顏色 / 未填充的星星部分相同。我們計算 div 的寬度，首先用最大值除以評級，然後從 100 中減去這個值。

const percentage = Math.round((value / max) * 100); <div className={styles.overlay} style={{ width: `${100 - percentage}%` }} />

添加下面的樣式，給星星布局:

.container { display: inline-flex; align-items: center; position: relative; } .star { width: 18px; margin-right: 2px; display: flex; color: #f8d448; &:last-of-type { margin-right: 0; } } .overlay { background-color: black; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; }

現在覆蓋的是純黑色，讓我們來改變它的顏色:

使用 mix-blend-mode 來改變 SVG 顏色

最後一步，使覆蓋的 div 只影響下面的星形 svg，而不要影響到背景。我們可以使用 CSS 的 mix-blend-mode 混合模式屬性和顏色值來做。

顏色說明如下:

使用源色的色相和飽和度以及背景色的亮度創建一個顏色。這保留了背景的灰度，對單色 / 彩色圖形上色很有用。

我們用這個屬性給圖形上色，看看會發生什麼:

.overlay { background-color: black; mix-blend-mode: color; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; }

這正是我們想要的！它改變了星星的色調和飽和度，但保持背景色不變。你可以用背景色來改變星星的顏色。例如，如果我使用 background-color: red，我得到的是紅色而不是灰色的星星。

瀏覽器的支持度非常好 (所有現代瀏覽器都支持)，但對於較老的瀏覽器，我們可以改用 opacity:

.overlay { background-color: black; mix-blend-mode: color; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; @supports not(mix-blend-mode: color) { opacity: 0.7; } }

你可以在這裡找到完整的源代碼。如果你覺得這個 CSS 技巧有用，請動動手指點個讚，非常感謝！

關於本文譯者：@jacob_three譯文：https://juejin.cn/post/7035096926454284324作者：@Samuel Kraft原文：https://samuelkraft.com/blog/fractional-svg-stars-css