@Ilyaploskov

Как реализовать закраску SVG в зависимости от width другого элемента?

Доброго дня!

Есть готовый компонент рейтинга для Joomla, там есть следующий html с SVG иконками > https://codepen.io/ilya-vins/pen/povVgEw

Как видите, там есть такой элемент

<span class="extravote-stars"> <span id="rating_163_1" class="current-rating" style="width:100%;"></span>


В нём значение style="width:100%;" , меняется в зависимости от рейтинга в процентах. (берётся из БД)

Мне не хватает знаний, чтобы реализовать закраску SVG звёздочек в зависимости от style="width:100%;" . В SVG не силён.

Что имеется в виду:
Если style="width:20%;" то закрашивается 1 звёздочка, если 25%, то одна звёздочка и часть второй звёздочки. И так далее.
Так же как видно, каждая звёздочка это самостоятельный элемент, на который можно нажать, чтобы проставить рейтинг. То есть рисовать общий SVG тут наверное не прокатит.

Что тут можно сделать с минимальными переделками? Подскажите любой костыль, спасибо.
  • Вопрос задан
  • 47 просмотров
Пригласить эксперта
Ответы на вопрос 1
Royamov
@Royamov
seoportal.net
Вам достаточно создать так называемый спрайт - картинку, разные части которой будут отображаться в качестве фона элемента в зависимости от условий. Посмотрите на картинку в формате PNG, которая по умолчанию используется этим плагином, и сделайте SVG с такими же пропорциями.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы