работа с SVG иконками (html+css)

129

13 декабря 2020, 17:50

Очень нужна помощь знатоков. Суть в том, что есть свг иконки, при наведении они должны меня цвет (обводку, заливку). Вопрос в том, как это правильно сверстать. Сейчас у меня есть svg-спрайт в самом html, в котором я удаляю все цветовые свойства и потом задаю их через css.

.rating-item:hover {
  .svg-icon {    
  background: #58CFEF;
  border-radius: 50%;
  fill: #58CFEF;
  stroke: #fff;
 }
}

Но проблема в том, что результат отличается от того, что дано в макете. Для примера https://codepen.io/Raneto4ka/pen/dEMaNr слева то, что у меня на выходе, а справа две иконки - это оригинальный код (без удаленных цветовых свойств. Как это побороть?

Answer 1

У вас не очень удачно экспортирован СВГ (либо не очень удачно придуман ховер в макете :). В макете показано, что при ховере часть путей (внутренние) становятся белыми, а внешний путь - голубым, вместе с фоном. Следовательно СВГ нужно экспортировать так, чтобы пути были двумя раздельными объектами, чтобы менять ховер двумя простыми строчками CSS и не мучаться с толщиной обводки и другими хаками. Либо немного отойти от макета, чтобы не тратить на такие технически недочёты много время. И да, подложку (для смены фона) лучше тоже делать в СВГ, потому что не все иконки бывают круглыми, когда background:blue; border-radius:50% не поможет.