2

Необходимо сделать звездный рейтинг, и главным условием является то что он должен быть в svg что бы хорошо отображался на ретина дисплеях. Сколько гуглил, не нашел решений с использованием svg иконок, но больше всего понравился вариант на fontawesome планирую только создать отдельный шрифт со своими нужными иконками, и в связи с этим хотел поинтересоваться, может кто знает решение получше?

3
  • А в чём проблема взять абсолютно любой звёздный рейтинг и просто поменять в нём картинки на svg?
    – andreymal
    8 янв 2018 в 12:21
  • В тех рейтингах что я видел изображения звезд задаются background-ом, а какой смысл от svg изображения когда оно задано через background? 8 янв 2018 в 12:25
  • Такой же, как и от любого другого svg. Непонятно в чём вопрос
    – andreymal
    8 янв 2018 в 12:56

1 ответ 1

3

Вот реализация на svg точно такой же картинки как вы хотите.

$('.star.rating').click(function(){  
  $(this).parent().attr('data-stars',$(this).data('rating'));
});
.stars {
  cursor: pointer;
}
.stars:hover .star polygon {
  fill: #ffd055 !important;
}
.stars .star {
  float: left;
}
.stars .star polygon {
  fill: #d8d8d8;
}
.stars .star:hover ~ .star polygon {
  fill: #d8d8d8 !important;
}
.stars[data-stars] .star polygon {
  fill: #ffd055;
}
.stars[data-stars="1"] .star:nth-child(1) ~ .star polygon {
  fill: #d8d8d8;
}
.stars[data-stars="2"] .star:nth-child(2) ~ .star polygon {
  fill: #d8d8d8;
}
.stars[data-stars="3"] .star:nth-child(3) ~ .star polygon {
  fill: #d8d8d8;
}
.stars[data-stars="4"] .star:nth-child(4) ~ .star polygon {
  fill: #d8d8d8;
}
.stars[data-stars="5"] .star:nth-child(5) ~ .star polygon {
  fill: #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="stars" data-stars="1">
	<svg height="25" width="23" class="star rating" data-rating="1">
    <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
  </svg>
  <svg height="25" width="23" class="star rating" data-rating="2">
    <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
  </svg>
  <svg height="25" width="23" class="star rating" data-rating="3">
    <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
  </svg>
  <svg height="25" width="23" class="star rating" data-rating="4">
    <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
  </svg>
  <svg height="25" width="23" class="star rating" data-rating="5">
    <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
  </svg>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.