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

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

Берем 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 какая иконка нужна (закрашенная или пустая) и выводим её