Рейтинг в виде звёзд, по-быстрому
Берем 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>
Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.