我目前有一个评分系统，可以产生 5 颗星，可以显示一半的值。我通过使用 FontAwesome 的半星来做到这一点，并做了一些 CSS 技巧让它们看起来像一颗星。但是我想通过想出一种只显示一半 SVG 图标的方法来增加我的 React 和 CSS 知识。因此，我可以使用用户想要的任何图标，而不是使用半星，例如，如果你想给出 3.5 分，它只会显示 50% 的图标。
问:您能否只显示图标的一半并以某种方式知道用户是单击一侧还是另一侧？
这是我目前使用的代码，它使用 HalfStars 作为引用
import React, { useState } from 'react'
import { FaRegStarHalf, FaStarHalf } from 'react-icons/fa'
import './styles/Rater.css'
const Rater = ({ iconCount }) => {
const [rating, setRating] = useState(null)
const [hover, setHover] = useState(null)
// check if user has set a rating by clicking a star and use rating to determine icons
const Star = rating ? FaStarHalf : FaRegStarHalf
return (
<div>
{[...Array(iconCount), ...Array(iconCount)].map((icon, i) => {
const value = (i + 1) / 2
return (
<label>
<input
type='radio'
name='rating'
value={value}
onClick={() => {
console.log(`value => `, value)
return setRating(value)
}}
/>
<div className='star-container'>
<div>
<Star
className={i % 2 ? 'star-left' : 'star'}
color={value <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
onMouseEnter={() => setHover(value)}
onMouseLeave={() => setHover(null)}
/>
</div>
</div>
</label>
)
})}
</div>
)
}
export default Rater
最佳答案
我已经编写了一个代码来让您了解这个想法；如果您单击星星的右侧，它的颜色会变为蓝色，如果您单击左侧，它的颜色会变为金色。另外，最好不要使用stopPropagation并检查 e.target的事件。
const starIcon = document.getElementById("star");
const icon = document.getElementById("icon");
starIcon.onclick = e => {
starIcon.style.color = "blue";
e.stopPropagation();
};
icon.onclick = e => {
starIcon.style.color = "gold";
}i {
clip-path: inset(0 0 0 50%);
color: gold;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet">
</head>
<body>
<span id="icon"><i id="star", class="fas fa-star"></i></span>
</body>
</html>关于javascript - 是否可以只显示 SVG 图标的一半？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65366162/