¿Cómo puedo cambiar el color de un svg img en formato base64?

Esta inquietud se puede solucionar de variadas maneras, sin embargo te mostramos la resolución más completa para nosotros.

Solución:

Como no aclaró si no puede modificar el archivo original o si debe hacerlo en el lado del cliente, propongo un

Enfoque programático:

1. buscar el
2. Desde img.src tira "data:image..."para extraer SVG codificado en Base64.
3. Descifrarlo usando atob
4. Crea un elemento, solo para encontrar el
5. Establecer relleno en la ruta.
6. Agregue la nueva imagen o reemplace la actual.

Ejemplo:

// Lookup the  by Id
var img = document.getElementById("target");

// Strip "data:image/svg+xml;base64," to get encoded SVG
var encoded = img.src.substring(26);

// Decode base64
var decoded = atob(encoded);

// Create an HTML element from decoded SVG
var wrapper = document.createElement('div');
wrapper.innerHTML = decoded;
var newSvg = wrapper.firstChild;

// Lookup the  and get a ref
var innerPath = newSvg.getElementsByTagName('path')[0];

// Set up new color
innerPath.setAttribute("fill", "#FF0000");

// Show modified image
document.body.appendChild(newSvg);

Nota:

Hay algunas restricciones en IE < 10

¿Puedo usar atob?

EDITAR: Enfoque Muplipath

var paths = newSvg.getElementsByTagName('path');
[].forEach.call(paths, function(path) 
    path.setAttribute("fill", "#FF0000");
);

Recuerda que puedes comunicar esta sección si te ayudó.

---

---

Utiliza Nuestro Buscador