Как поправить svg, чтобы залить цветом исключительно звездочки?

Максим Ленский, зачем ты удалил? на другом проекте мне как раз нужно на чистом css(

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, let goPercentage = Math.ceil((e.clientX - left)/width * 100);
но что-то ничего не поменялось

не то округляю?

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, та просят именно свг
просто изначально хотели так
теперь так)
та и врядли подойдет
на сервере оценки все считается - и будет не все звездочки выводит
тоесть может вывести и 3.5
4.15

так можно как то поправить?
update

Почему может показываться отрицательное значение, если двигать по максимуму слева?

sobolay,
https://codepen.io/Olya097/pen/vYEpNOw

есть нюанс

когда ставится рейтинг, он должен показывать только целые звездочки)
т.е. длина 0% 20% 40% 60% 80% 100%

как это учесть?

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, вроде как подправила
https://codepen.io/Olya097/pen/vYEpNOw

но есть нюанс

когда ставится рейтинг, он должен показывать только целые звездочки)
т.е. длина 0% 20% 40% 60% 80% 100%

как это учесть?

мне кажется в этой формуле дело
let goPercentage = (e.clientX - left)/width * 100;

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, Поставьте width=147

заменила. но видимо не только в этом проблема(
-----------------------------------------------------------
так у вас другого размера svg.
а почему другого? я ж свг ваше взяла

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, ограничение наименьшего и наибольшего положения
move(e, obj)

и проверка на событие выхода за пределы объекта через правую его границу: если мышь вышла через правую границу, то присваиваем 5

$('.stars__data').on('mouseleave', function(e) { }

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, вот
https://codepen.io/Olya097/pen/vYEpEgg
не пойму в чем проблема

в консоли Error: attribute width: A negative value is not valid. ("-364.08839779005524%")
attr @ jquery-3.1.1.min.js:4

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, сейчас скину
результат почти такой же
но не совсем
не пойму из-за чего

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, тоесть написать svg{width 181px;} ?

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, Все таки косяк с полной шириной svg элемента.
В DOM стоит 173, а по факту 181. В чем проблема не знаю.

как думаете, это сильно принципиально? ведь по факту задача решена

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, js, jquery
не суть. ДУмаю смогу поправить
суть в другом

ну вот если я двигаюсь влево то к примеру у меня 4 звездочки становятся синими
а пятая должна остаться красной

если двигаюсь влево то к примеру у меня 3.5 звездочки становятся синими
а 1.5 должны оставаться красными

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, а зачем нужно делить на 181?
Для себя хочу понять

суть в том что красный вообще пропадает
тоесть становится белым
а должен оставаться

Почему может показываться отрицательное значение, если двигать по максимуму слева?

sobolay, ок, спасибо
А как можно ту переменную назвать? Там где width

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, вот что есть на данный момент
можно как то поправить? пожалуйста
https://jsfiddle.net/bvz7x390/1/

Почему может показываться отрицательное значение, если двигать по максимуму слева?

sobolay, если можно еще)

1) а можно было заменить e.pageX на что-то другое?
var progress = e.pageX - obj.offset().left;

2 ) и как понять эти проверки?
если вышли за границы ?

if (e.pageX < leftEdge) {
progress = 0;
} else if (e.pageX >= rightEdge) {
progress = obj.width();
}

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, спасибо
но как мне теперь поменять цвет звездочки?
тоесть чтобы динамично менялось
этого фона воокруг вообще не нужно (красного)

тоесть по динамике нужно менять синий на желтый
к примеру

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, спасибо
а у вас 5 звездочек отображаются?

Как поправить svg, чтобы залить цветом исключительно звездочки?

ReaverJS, видимо не так объяснила
хотя и это также полезно знать)
суть в том, что нужно убрать черный фон
вот тут я сейчас поставила gold
поставлю transparent - звездочки пропадут
https://jsfiddle.net/9j2cgzvn/

Почему может показываться отрицательное значение, если двигать по максимуму слева?

sobolay, reasonableWidth = width * 0.1,

а можете объяснить зачем мы тут берем ширину и умножаем на 0.1

-----------------------------------------------------------------------------------------------------

$('#param' + id).text("5");
$(this).next().width(width);

и как это работает? для чего 5? для чего следуещий элемент

пожалуйста
извиняюсь, если странный вопрос