Comments 5
А что с совместимостью с различными браузерами? Не будет проблем?
Я бы сделал маску на все 5 звезд. Так можно сделать рейтинг точно 3.2. И проблем с контуром не будет. Хотя иногда будут возникать артефакты, "хвостики".
Как-то так:
<svg width="160" height="32" viewBox="0 0 160 32">
<defs>
<mask id="perc">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<rect x="48%" y="0" width="100%" height="100%" fill="grey" />
</mask>
<symbol viewBox="0 0 32 32" id="star">
<path d="M31.547 12a.848.848 0 00-.677-.577l-9.427-1.376-4.224-8.532a.847.847 0 00-1.516 0l-4.218 8.534-9.427 1.355a.847.847 0 00-.467 1.467l6.823 6.664-1.612 9.375a.847.847 0 001.23.893l8.428-4.434 8.432 4.432a.847.847 0 001.229-.894l-1.615-9.373 6.822-6.665a.845.845 0 00.214-.869z" />
</symbol>
<symbol viewBox="0 0 160 32" id="stars">
<use xlink:href="#star" x="-64" y="0"></use>
<use xlink:href="#star" x="-32" y="0"></use>
<use xlink:href="#star" x="0" y="0"></use>
<use xlink:href="#star" x="32" y="0"></use>
<use xlink:href="#star" x="64" y="0"></use>
</symbol>
</defs>
<use xlink:href="#stars" fill="green" stroke="black" mask="url(#perc)"></use>
</svg>
Во-первых, одним svg. Во-вторых, заполнение указывается в % и только в одном месте.
Для интересующихся видео Максима Макеева с реализацией на radio input. Там без возможности указывать дробный рейтинг. Но для информации думаю будет интересно
заполнение указывается в % и только в одном месте
Это удобно если на странице есть только один товар с таким рейтингом. Иначе придется для каждой группы звездочек создавать отдельную маску с уникальным id и своим процентом заполнения.
Более универсальным будет вариант с использованием самих фигур звезд как маски для прямоугольника с заливкой.
Sign up to leave a comment.
Звёздный рейтинг: решение с использованием SVG