svg, javascript:отрисовка с маской [дубликат]

195
03 июня 2018, 00:40

На данный вопрос уже ответили:

  • Посоветуйте реализацию звездного рейтинга на svg 1 ответ

У меня есть коэффициент rating, требуется отрисовать звёздочки (изображения заданы в виде svg), которые визуализируют этот коэффициент:

svg:

<svg xmlns="http://www.w3.org/2000/svg" width="260" height="245">
    <path d="m55,237 74-228 74,228L9,96h240"/>
</svg>

Я реализовал это в лоб с помощью 5 блоков div и 3 svg задних фонов (пустой, половинчатый, полный)

<div class = 'rating'>
    <div class = 'on'></div>
    <div class = 'on'></div>
    <div class = 'half'></div>
    <div class = 'off'></div>
    <div class = 'off'></div>
</div>

Html код естественно генерировался через javascript в зависимости от значения rating

Но мне очень не нравится эта "влобность", некрасивое и неоптимальное решение (да и выглядит жутко).

Подскажите, как это можно сделать с помощью одного только svg (ну и небольшой доли javascript)?

Как я понимаю,

  1. потребуется одна звездочка,
  2. которая будет размножена в группу из 5 звездочек
  3. цвет у этой группы будет "серый"
  4. ещё одна группа цвета "золотой" будет наложена сверху на серую группу
  5. ширина группы "золотой" будет вычисляться rating / 5

P.S.

А если таких картинок понадобится 1000, браузер не просядет (картинки маленькие, это тут показаны большие для удобства)?

P.P.S.

Или не извращаться и реализовать всё это через 2 div с обычным png фоном из 5 звездочек (золотых и серых), просто ширина "золотого" блока будет задаваться?

P.P.P.S.

Вообще что наука :) говорит по поводу использования на сайтах svg в виде разных картинок и иконок (особенно, когда таких картинок/иконок много на сайте)

Answer 1

Можно немного схитрить использовать 2 блока с звездочками

.rate { 
  font-size: 40px; 
  position: relative; 
  display: flex; 
  background: red; 
} 
.rate .blank { 
  color: #aaa; 
  position: absolute; 
} 
.rate .rated { 
  color: #ffdd00; 
  position: absolute; 
  width: 80px; 
  overflow: hidden; 
}
<div class="rate"> 
  <div class="blank">☆☆☆☆☆</div> 
  <div class="rated">★★★★★</div> 
</div>

Или псевдоэлементы

@charset "UTF-8"; 
.rate { 
  font-size: 40px; 
  display: flex; 
} 
.rate .stars { 
  color: #aaa; 
  position: relative; 
} 
.rate .stars::before { 
  content: "★★★★★"; 
  position: absolute; 
  width: 53%; 
  overflow: hidden; 
  color: #FFDD00; 
}
<div class="rate"> 
  <div class="stars">☆☆☆☆☆</div> 
</div>

READ ALSO
Выплнение скрипта внутри ajax кода
javascript

Выплнение скрипта внутри ajax кода

Есть скрипт:

 166
Импорт данных из файла CSV в JavaScript массив (array)
javascript

Импорт данных из файла CSV в JavaScript массив (array)

У меня есть файл CSV, который внешне похож на excel таблицуИ там есть данные в два столбца и 500 строк

 238
Пользовательская функция суммы в зависимости от значений в строке
javascript

Пользовательская функция суммы в зависимости от значений в строке

Функция перебрает масив

 223
Ajax with class js
javascript

Ajax with class js

Есть класс в котором нужно инициализировать переменные, что естьДоступ к этим переменным идет через json файл, но в таком случае выдает undefined,...

 179