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

Question

[olya_097]

https://jsfiddle.net/9j2cgzvn/

Answer 1

[ReaverJS]

Rect внутри svg, заливка управляется с помощью width.

Comments

[olya_097]

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

[ReaverJS]

olya_097, в таком случае без маски все таки не обойтись.

[olya_097]

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

[ReaverJS]

olya_097, в самом конце есть < rect> - у него ширина 50% стоит. Соответственно и звезды 2.5.

[olya_097]

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

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

[olya_097]

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

[Максим]

olya_097, если человек дал ни верный ответ зачем отмечаешь его решением?

[ReaverJS]

olya_097, внутри svg - есть элемент rect (который не внутри < mask>) - так вот меняя его ширину, мы меняем ширину заливки. Цвет меняется атрибутом fill.

[olya_097]

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

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

[ReaverJS]

olya_097,

а зачем нужно делить на 181?

Это ширина всего элемента (на самом деле не 181, а 173). Ниже правильный пример.
Лучше не смотрите мой код на jQuery, вы же на ванильном писали. Суть просто в том чтоб получить смещение мыши по оси Х в процентах и задать эту ширину заливающему прямоугольнику.

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

Не понял где он должен быть? Так?

[olya_097]

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

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

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

[ReaverJS]

olya_097,
Тогда синий прямоугольник - от 0 до Х.
Красный - от Х до 100%.

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

[ReaverJS]

olya_097, вообще самый легкий вариант был - взять 2 картинки (с синими и с красными звездами) - наложить их друг на друга и менять ширину красных звезд, чтобы она накладывалась на синие. Перемудрили по ходу.

[olya_097]

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

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

[ReaverJS]

olya_097, лучше вручную прописать 181 - все равно у него ширина не меняется.

[olya_097]

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

[ReaverJS]

ReaverJS, нет. В JS - let width = 181;

[olya_097]

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

[olya_097]

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

[ReaverJS]

olya_097, так у вас другого размера svg. Поставьте width=147

И другой код кроме mousemove и onclick что-нибудь делает?

[olya_097]

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

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

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

[olya_097]

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

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

[olya_097]

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

но есть нюанс

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

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

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

[ReaverJS]

olya_097, блин, если целые звездочки - то тут точно svg не нужен (всмысле js для svg). Вон снизу решение.

[olya_097]

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

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

[ReaverJS]

olya_097, да. Просто полученную ширину округлите до 20 большую сторону.
Т.е. было 67% - округляем до 80% и т.д.

[olya_097]

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

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

[ReaverJS]

olya_097, Math.ceil - округление до целого числа. Т.е. 67.7 округляет до 68, а надо до 80.
Тут нужно целочисленное деление.

[olya_097]

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

Answer 2

[Максим]