Как бороться с цветом svg?

Вопрос-ответ HTML/CSS
1

Хотелось бы поговорить о формате Svg.
Столкнулся вот с таким кодом <path d="M26 13.47l-.09-.17a13.55 13.........." fill="#fff"/>
разобравшись понял что через path можно будет применить и иной цвет для svg.
Но что делать когда таких элементов нету, пробовал добавлять, но безрезультатно.

Спасибо

2

Посмотри css свойство fill. Пример - https://jsfiddle.net/bsdqu2of/ fill применяется на hover

3

можете здесь глянуть, как в положении active(или любом другом) задать иной любой цвет для svg

4

Это не SVG - там под капотом просто картинка: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...

5

ок, а как в таком случае сделать active для неё? есть варианты?

6

Если в svg вставлена картинка и это все что есть в svg , то смысла в svg нет - просто используй картинку.

Можно сделать трюк с подменой background-image. Только предварительно закешируй картинку для состояния active.

А можно трюк с background-position картинки в элементе ограниченного размера.

Если не понятно о чем я, сделай заготовку в codepen с png - я покажу код. Та заготовка что есть (что зашарпал выше) имеет кучу ненужного кода.

7
8

О, есть решение в рамках твоей реализации. В отличии от предыдущей селектор :active нужно применять к a https://codepen.io/anon/pen/yGBPoB

9

что-то я не уловил, актив работает на самом круге, а я думал ещё есть возможность на эктив поставить саму иконку. или же цвет фона круга не меняется а сама иконка меняет цвет, вот основной вопрос)

спасибо

10

Можно импользовать тот-же подход (с ::after), но иконку поставить как фон в элементе ::after, а на :active менять не background-color, а background-image

11

Ну как вариант) только это отдельно иконку надо будет подкрасить)