img src SVG cambiando el color de relleno

html

Logo 

css

 .logo-img path { fill: #000; } 

El svg anterior carga y es fill: #fff nativo fill: #fff pero cuando uso el css anterior para intentar cambiarlo a negro no cambia, esta es la primera vez que juego con SVG y no estoy seguro de por qué no está funcionando.

Debes hacer que el SVG sea un SVG en línea . Puede hacer uso de este script, agregando un svg clase a la imagen:

 /* * Replace all SVG images with inline SVG */ jQuery('img.svg').each(function(){ var $img = jQuery(this); var imgID = $img.attr('id'); var imgClass = $img.attr('class'); var imgURL = $img.attr('src'); jQuery.get(imgURL, function(data) { // Get the SVG tag, ignore the rest var $svg = jQuery(data).find('svg'); // Add replaced image's ID to the new SVG if(typeof imgID !== 'undefined') { $svg = $svg.attr('id', imgID); } // Add replaced image's classes to the new SVG if(typeof imgClass !== 'undefined') { $svg = $svg.attr('class', imgClass+' replaced-svg'); } // Remove any invalid XML tags as per http://validator.w3.org $svg = $svg.removeAttr('xmlns:a'); // Check if the viewport is set, if the viewport is not set the SVG wont't scale. if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) { $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width')) } // Replace image with new SVG $img.replaceWith($svg); }, 'xml'); }); 

Y luego, ahora si lo haces:

 .logo-img path { fill: #000; } 

O tal vez:

 .logo-img path { background-color: #000; } 

¡Esto funciona!

Fiddle: http://jsfiddle.net/wuSF7/462/

Créditos para el script anterior: ¿Cómo cambiar el color de la imagen SVG usando CSS (reemplazo de imagen jQuery SVG)?

Si su objective es solo cambiar el color del logotipo, y no necesariamente NECESITA usar CSS, entonces no use javascript o jquery como lo sugirieron algunas respuestas anteriores.

Para responder con precisión a la pregunta original, solo:

  1. Abra su logo.svg en un editor de texto.

  2. buscar fill: #fff y reemplazarlo por fill: #000

Por ejemplo, su logo.svg podría verse así cuando se abre en un editor de texto:

     

… solo cambia el relleno y guarda.

Podrías configurar tu svg como una máscara. De esa forma, establecer un color de fondo actuaría como color de relleno.

HTML

  

CSS

 .logo { background-color: red; -webkit-mask: url(logo.svg) no-repeat center; mask: url(logo.svg) no-repeat center; } 

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/

Tenga en cuenta que este método no funciona para el navegador Edge. Puede verificarlo yendo a este sitio web: https://caniuse.com/#search=mask

La respuesta de @Praveen es sólida.

No pude lograr que respondiera en mi trabajo, así que hice una función de jquery hover para ello.

CSS

 .svg path { transition:0.3s all !important; } 

JS / JQuery

 // code from above wrapped into a function replaceSVG(); // hover function // hover over an element, and find the SVG that you want to change $('.element').hover(function() { var el = $(this); var svg = el.find('svg path'); svg.attr('fill', '#CCC'); }, function() { var el = $(this); var svg = el.find('svg path'); svg.attr('fill', '#3A3A3A'); }); 

¿Por qué no crear una fuente web con su imagen svg o imágenes, importar la fuente web en el CSS y luego simplemente cambiar el color del glifo utilizando el atributo de color css? No se necesita javascript

Esta respuesta se basa en la respuesta https://stackoverflow.com/a/24933495/3890888 pero con una versión de JavaScript sin formato del script utilizado allí.

Debes hacer que el SVG sea un SVG en línea . Puede hacer uso de este script, agregando un svg clase a la imagen:

 /* * Replace all SVG images with inline SVG */ document.querySelectorAll('img.svg').forEach(function(img){ var imgID = img.id; var imgClass = img.className; var imgURL = img.src; fetch(imgURL).then(function(response) { return response.text(); }).then(function(text){ var parser = new DOMParser(); var xmlDoc = parser.parseFromString(text, "text/xml"); // Get the SVG tag, ignore the rest var svg = xmlDoc.getElementsByTagName('svg')[0]; // Add replaced image's ID to the new SVG if(typeof imgID !== 'undefined') { svg.setAttribute('id', imgID); } // Add replaced image's classes to the new SVG if(typeof imgClass !== 'undefined') { svg.setAttribute('class', imgClass+' replaced-svg'); } // Remove any invalid XML tags as per http://validator.w3.org svg.removeAttribute('xmlns:a'); // Check if the viewport is set, if the viewport is not set the SVG wont't scale. if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) { svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width')) } // Replace image with new SVG img.parentNode.replaceChild(svg, img); }); }); 

Y luego, ahora si lo haces:

 .logo-img path { fill: #000; } 

O tal vez:

 .logo-img path { background-color: #000; } 

JSFiddle: http://jsfiddle.net/erxu0dzz/1/

Para ampliar la respuesta de @gringo, el método de Javascript descrito en otras respuestas funciona, pero requiere que el usuario descargue archivos de imágenes innecesarios, y OMI, hincha su código.

Creo que un mejor enfoque sería migrar todos los gráficos vectoriales de 1 color a un archivo de fuente web. He usado Fort Awesome en el pasado, y funciona genial combinar tus icons / imágenes personalizados en formato SVG, junto con cualquier ícono de terceros que puedas estar usando (Font Awesome, íconos de Bootstrap, etc.) en un único archivo de WebFont. el usuario tiene que descargar. También puede personalizarlo, por lo que solo incluye los icons de terceros que está utilizando. Esto reduce el número de solicitudes que debe realizar la página y, en general, pesa la página, especialmente si ya incluye bibliotecas de icons de terceros.

Si prefiere una opción más orientada al desarrollo, puede buscar en Google “npm svg webfont” y usar uno de los módulos de nodo que sea más apropiado para su entorno.

Una vez que haya hecho cualquiera de esas dos opciones, podrá cambiar el color fácilmente a través de CSS, y lo más probable es que haya acelerado su sitio en el proceso.

2018: si quieres un color dynamic, no quieres usar javascript y no quieres un SVG en línea, usa una variable de CSS. Funciona en Chrome, Firefox y Safari.

    

En su SVG, reemplace cualquier instancia de style="fill: #000" con style="fill: var(--color_fill)" .

Como SVG es básicamente código, solo necesitas contenidos. Usé PHP para obtener contenido, pero puedes usar lo que quieras.

 < ?php $content = file_get_contents($pathToSVG); ?> 

Luego, imprimí contenido “tal como está” dentro de un contenedor div

 
< ?php echo $content;?>

Para establecer finalmente la regla a los hijos SVG del contenedor en CSS

 .fill-class > svg { fill: orange; } 

Obtuve estos resultados con un icono de material SVG:

Mozilla Firefox 59.0.2 (64 bits) Linux

enter image description here

Google Chrome66.0.3359.181 (Build oficial) (64 bits) Linux

enter image description here

Opera 53.0.2907.37 Linux

enter image description here

Si tiene acceso a JQuery, luego extendiéndose a la respuesta de Praveen, se puede cambiar programáticamente el color de diferentes elementos nesteds dentro de SVG de la siguiente manera:

$('svg').find('path, text').css('fill', '#ffffff');

Dentro de Find, puede mencionar diferentes elementos que se deben cambiar en color.

El principal problema en su caso es que está importando svg de una etiqueta que ocultará la estructura SVG.

usar la etiqueta junto con para obtener el efecto deseado. Para que funcione, debe proporcionar un id a la ruta que desea utilizar en el archivo SVG para poder recuperarlos desde etiqueta. Prueba el recorte a continuación.

 .icon { display: inline-block; width: 2em; height: 2em; transition: .5s; fill: currentColor; stroke-width: 5; } .icon:hover { fill: rgba(255,255,255,0); stroke: black; stroke-width: 2; } .red { color: red; } .blue { color: blue; } 
               

Prueba pure CSS:

 .logo-img { // to black filter: invert(1); // or to blue // filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg); } 

más información en este artículo https://blog.union.io/code/2017/08/10/img-svg-fill/