Рейтинг в виде звёзд, по-быстрому

935
Алексей,
Рейтинг в виде звёзд, по-быстрому
Рейтинг в виде звёзд, по-быстрому

Берем svg иконки звезд, далее в зависимости от рейтинга, проверяем на php какая иконка нужна (закрашенная или пустая) и выводим её

Берем svg иконки звезд, далее в зависимости от рейтинга, проверяем на php какая иконка нужна (закрашенная или пустая) и выводим её

<div class="rating">
<?$rating = 3.5?>
	<?for ($i = 0; $i < 5; $i++):?>
		<?if ($rating-$i > 1)  $s = '1'; else  $s = ($rating-$i > 0) ? '05' : '0'; ?>
		<svg class="rating-icon">
			<use xlink:href="/images/rating.svg#star<?=$s?>"></use>
		</svg>
	<?endfor;?>
</div>

Код svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<symbol id="star0" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path fill-rule="evenodd"  fill="rgb(192, 192, 192)" d="M7.992,0.882 L10.593,5.356 L15.884,6.320 L12.201,10.048 L12.870,15.117 L7.992,12.948 L3.114,15.117 L3.782,10.048 L0.099,6.320 L5.390,5.356 L7.992,0.882 "/>
	</symbol>
	<symbol id="star05" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path fill-rule="evenodd"  fill="rgb(255, 186, 0)" d="M7.893,12.948 L3.015,15.117 L3.684,10.048 L0.001,6.320 L5.292,5.356 L7.893,0.882 "/>
		<path fill-rule="evenodd"  fill="rgb(192, 192, 192)" d="M7.943,0.882 L10.544,5.356 L15.835,6.320 L12.152,10.048 L12.820,15.117 L7.943,12.948 "/>
	</symbol>
	<symbol id="star1" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path fill-rule="evenodd"  fill="rgb(255, 186, 0)" d="M7.992,0.882 L10.593,5.356 L15.884,6.320 L12.201,10.048 L12.870,15.117 L7.992,12.948 L3.114,15.117 L3.782,10.048 L0.099,6.320 L5.390,5.356 L7.992,0.882 "/>
	</symbol>
</svg>

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.

Опубликовано 24 мая 2021
Поделиться
Комментарии
❮…❯
Авторизуйтесь чтобы получать уведомления об ответе
Берем svg иконки звезд, далее в зависимости от рейтинга, проверяем на php какая иконка нужна (закрашенная или пустая) и выводим её