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

Question

[Ilyaploskov]

Доброго дня!

Есть готовый компонент рейтинга для 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 тут наверное не прокатит.

Что тут можно сделать с минимальными переделками? Подскажите любой костыль, спасибо.

Answer 1

[Нотан Ройамов]

Вам достаточно создать так называемый спрайт - картинку, разные части которой будут отображаться в качестве фона элемента в зависимости от условий. Посмотрите на картинку в формате PNG, которая по умолчанию используется этим плагином, и сделайте SVG с такими же пропорциями.

Comments

[Ilyaploskov]

Приветствую.

Реализация нужна не файлом svg, а HTML разметкой

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="star"><polygon fill="none" stroke="#000" stroke-width="1.01" points="10 2 12.63 7.27 18.5 8.12 14.25 12.22 15.25 18 10 15.27 4.75 18 5.75 12.22 1.5 8.12 7.37 7.27"></polygon></svg>