Можно ли изменить внутренний цвет изображения SVC по клику?
Да, существует множество подходов для получения этого результата.
Вот один из них, который использует URL данных SVG в CSS и Javascript.
Рабочий пример:
let stars = [...document.getElementsByClassName('star')];
const highlightStars = (event) => {
let targetStar = event.target;
let targetStarIndex = stars.indexOf(targetStar);
targetStar.classList.toggle('highlighted');
for (star of stars) {
if (stars.indexOf(star) > (targetStarIndex - 1)) {
star.classList.add('highlighted');
}
else {
star.classList.remove('highlighted');
}
}
}
for (star of stars) {
star.addEventListener('click', highlightStars, false);
}
.ratings {
float: left;
width: 520px;
}
.star,
.ratings:hover .star {
display: inline-block;
float: right;
width: 100px;
height: 108px;
background: rgb(191, 191, 191) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 198 198"><polygon points="100,10 40,198 190,78 10,78 160,198" fill="rgb(255, 255, 255)"></polygon></svg>') no-repeat;
cursor: pointer;
}
.ratings:hover .star:hover,
.star:hover ~ .star,
.star.highlighted {
background: rgb(255, 255, 255) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 198 198"><polygon points="100,10 40,198 190,78 10,78 160,198" fill="rgb(255, 255, 0)"></polygon></svg>') no-repeat;
}
<div class="ratings">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
NB Я знаю, что вы написали:
Просто используя html CSS без каких-либо сценариев
но всегда стоит помнить, что:
- HTML описывает структуру
- CSS описывает представление
- Javascript описывает поведение
, поэтому, если вы хотите, чтобы элементы отображались по-другому после взаимодействия пользователя с кликом, тогда javascript - абсолютно подходящий инструмент для прослушивания кликов и обновления CSS когда он слышит один.