lamara-nsk.ru Это блог о сео, деньгах, заработке в сети, разработке своих проектов, программировании и "жизни программиста", бизнесе, блогосфере, фрилансе и многом другом.
Как изменить цвет SVG иконки через CSS без использования fill
SVG картинка и ее цвет:
SVG иконка имеет размеры 14x13 и состоит из двух линий
Цвет линий задан как черный
Каким образом можно поменять цвет данной иконки через CSS:
Использовать свойство stroke для изменения цвета линий
Добавить класс к SVG элементу и применить стили через CSS
Пример CSS кода для изменения цвета линий на красный:
.icon {
stroke: red;
}
Применить класс "icon" к SVG элементу:
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
<line y1="-0.5" x2="17.5227" y2="-0.5" transform="matrix(0.727587 0.686015 -0.727587 0.686015 0.250488 0.843262)" stroke="black"/>
<line y1="-0.5" x2="17.5227" y2="-0.5" transform="matrix(-0.727587 0.686015 -0.727587 -0.686015 13 0.135986)" stroke="black"/>
</svg>
После применения указанных шагов, цвет линий иконки будет изменен на красный. Таким образом, можно изменить цвет SVG иконки через CSS, даже если отсутствует тег path.
Блог на движке WordPress и тема для него создана DimoninG'ом в 2007 году. Все материалы авторские, их копирование запрещено законом об авторском праве.