¿Cómo cambiar el color de un elemento svg?

Solución:

Respuesta 2020

El filtro CSS funciona en todos los navegadores actuales

Para cambiar cualquier color de SVG

1. Agregue la imagen SVG usando un <img> etiqueta.

<img src="https://foroayuda.es/dotted-arrow.svg" class="filter-green"/>

2. Para filtrar a un color específico, use el siguiente Codepen (haga clic aquí para abrir el codepen) para convertir un código de color hexadecimal en un filtro CSS:

Por ejemplo, salida para #00EE00 es

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

3. Agrega el CSS filter en esta clase.

    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }

Para cambiar el color de cualquier SVG, puede cambiar directamente el código svg mediante abrir el archivo svg en cualquier editor de texto. El código puede parecerse al siguiente código

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

Puedes observar que hay algunas etiquetas XML como ruta, círculo, polígono, etc.. Allí puede agregar su propio color con la ayuda de atributo de estilo. Mira el siguiente ejemplo

<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

Agregue el atributo de estilo a todas las etiquetas para que pueda obtener su SVG del color requerido

No puede cambiar el color de una imagen de esa manera. Si carga SVG como una imagen, no puede cambiar cómo se muestra usando CSS o Javascript en el navegador.

Si desea cambiar su imagen SVG, debe cargarla usando <object>, <iframe> o usando <svg> en línea.

Si desea utilizar las técnicas de la página, necesita la biblioteca Modernizr, donde puede verificar la compatibilidad con SVG y mostrar condicionalmente o no una imagen de respaldo. A continuación, puede incorporar su SVG y aplicar los estilos que necesite.

Ver :

#time-3-icon {
   fill: green;
}

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
	C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
	C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
	c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
	c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="https://foroayuda.es/ppngfallback.png" />

Puede insertar su SVG, etiquetar su imagen alternativa con un nombre de clase (my-svg-alternate):

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="https://foroayuda.es/ppngfallback.png" />

Y en CSS usa el no-svg class de Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js) para comprobar la compatibilidad con SVG. Si no hay soporte SVG, el bloque SVG se ignorará y se mostrará la imagen; de lo contrario, la imagen se eliminará del árbol DOM (display: none):

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

Luego puede cambiar el color de su elemento en línea:

#time-3-icon {
   fill: green;
}

---

---

Utiliza Nuestro Buscador