Как изменить цвет svg объекта, добавленного с помощью img?

#css #css3 #html5 #svg #filter

Я добавляю svg изображение в HTML разметку с помощью тега .
 Изображение чёрно-белое. Необходимо закрасить его, допустим в синий или зелёный цвет. 

Применение правил CSS для svg fill, stroke не даёт нужного эффекта.  



.img1 {
fill:dodgerblue; 
stroke:white;
path:inherit;
stroke:inherit;
}






Есть ли другие способы получить нужный результат?
    

Ответы

Ответ 1

Есть еще один способ. Всем элементам img с svg в разметке добавим класс .svg, затем
выберем и заменим их на svg с помощью Javascript.


  Не работает в IE11, Opera Mini




document.querySelectorAll('img.svg').forEach(img => {
    var imgId = img.id;
    var imgClass = img.className;
    var imgURL = img.src;
    var imgFill = img.getAttribute('data-fill');
    
    fetch(imgURL).then(r => r.text()).then(text => {
        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");
        var svg = xmlDoc.getElementsByTagName('svg')[0];
        
        if (typeof imgId !== 'undefined') {
            svg.setAttribute('id', imgId);
        }
        
        if (typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass);
        }        
        
        if (typeof imgFill !== 'undefined') {
            svg.setAttribute('fill', imgFill);
        }
        
        img.parentNode.replaceChild(svg, img);
        
    }).catch(console.error);
    
});
.svg {
  width:25px;
  height:25px;
  -webkit-transition: fill 280ms ease;
  -moz-transition: fill 280ms ease;
  -ms-transition: fill 280ms ease;
  -o-transition: fill 280ms ease;
  transition: fill 280ms ease;
}
.svg:hover {
  fill: green;
  cursor: pointer;
}
#test2 {
  fill:orange;
}
#test2:hover {
  fill:purple;
}





Ответ 2

Когда файл SVG добавлен на страницу HTML с помощью тега , то он ничем не отличается
от обычного изображения растрового формата. Поэтому невозможно применить стили из внешней
таблицы.  

Но есть возможность изменить цвет фигур svg с помощью фильтров CSS или SVG.

Цвет SVG фильтра можно установить любой.   


В примере ниже изображение будет покрашено в синий цвет




.container {
width:100%;
height:100%;
background:#d3d3d3;
overflow:hidden;
}
.container:hover {
background:black;
}
img {
filter:url(#filter_B);
}



     




Используя два фильтра, можно реализовать эффект наведения:  

img {
filter:url(#filter_B);
}
img:hover {
filter:url(#filter_G);
}           


Ниже полный код: 



.container {
width:100%;
height:100%;
background:#d3d3d3;
overflow:hidden;

}
.container:hover {
  background: black;
}
img {
  filter: url(#filter_B);
}
img:hover {
  filter: url(#filter_G);
}


  




Ответ 3

JS + svg filter

Можно добавлять svg фильтры с помощью JS. В нашем случае будет использован фильтр
filter:hue-rotate(120deg), который cработает при клике на svg 










Изменение цвета фильтра на альтернативный