Задать цвет картинке svg в файле со стилями

#html #css #svg

Имеется такое изображение в формате svg:




    
        
            
                
                    
                        
                        
                    
                
            
        
    





Не получается задать цвет в файле со стилями. 

svg {
  fill: orange;
}


В чем может быть ошибка?
    

Ответы

Ответ 1

Как вариант можете добавить изображению тень:



span{
  position:relative;
  display:inline-block;
  overflow:hidden;
}
img {
  transform: translateX(-100px);
  filter: drop-shadow(100px 0 0 orange);
}

 
  


Ответ 2

Хочу вас расстроить, но у вас нет векторной графики тут. У вас есть набор групп,
а внутри объявлена обычная картинка черного цвета в теге .

Вот эта:








Update:

Пример векторной картинки:



svg {
  fill: orange;
}



Ответ 3

SVG фильтры

Растровая картинка сконвертированная в svg не может быть стилизована обычными способами
fill:orange;
Но можно изменить её цвет целиком используя SVG фильтры     

SVG фильтры поддерживают все браузеры и даже IE11, Edge     

Для заполнения цветом я буду использовать Filter primitive ‘feColorMatrix’ 

Этот фильтр применяет матричное преобразование:  

  

Теория выглядит пугающе, но на самом деле использовать фильтры на практике довольно
просто.   

Для заполнения красным цветом я буду использовать следующую матрицу:  


            

Единица стоит в первой строке, отвечающей за красный цвет и в последней,- это альфа
канал, отвечающий за прозрачность.    

Ниже полный код заполнения красным цветом:    








Для заполнения другими цветами, потребуются незначительные изменения матрицы. Например:
зеленый цвет - "1" во второй строке матрицы, остальные строки, кроме альфа-канала нули.     

Заливка разными цветами нескольких клонов одного изображения

В примере ниже используется команда , которая дает возможность покрасить клоны
в разные цвета, применяя к ним фильтр с разной формулой матрицы.    

    

    

    









Стилизация изображений в формате image/png;base64 при наведении курсора

Представьте такую ситуацию,- дизайнер нарисовал очень красивую картинку, лого и т.д.
Выполнил вашу просьбу, чтобы она была в векторном формате.
 Но, рисовал её в растровом редакторе и сохранил её, как бы вектор, в формате base64.
То есть встроил растр в векторный формат. Обычная стилизация не работает.
Перерисовать вам в чистом векторе затруднительно.
 В этом случае можно  заменить стилизацию на обработку SVG фильтрами.     

Основная идея - в исходном состоянии на изображение накладывается один фильтр 


        
      


А при наведении курсора применяются другие цветные фильтры id="RedFilter", id="GreenFilter"
      



.R1:hover {
filter:url(#RedFilter);
} 

.G1:hover {
filter:url(#GreenFilter);
}
.B1:hover {
filter:url(#BlueFilter);
}



     

Второй вариант, но работает только в FF и IE     



/* Работает только для FF и IE  */  
use  {
filter:url(#WhiteFilter); 
} 
.R1:hover {
filter:url(#RedFilter);
} 

.G1:hover {
filter:url(#GreenFilter);
}
.B1:hover {
filter:url(#BlueFilter);
}