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

Quiero usar esta técnica y cambiar el color del SVG, pero hasta ahora no he podido hacerlo. Utilizo esto en CSS, pero mi imagen siempre es negra, pase lo que pase.

Mi código:

.change-my-color {
  fill: green;
}

<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

Expandir fragmento

Mar 07 '14 21:03 Barbara

respuesta 2020

El filtro CSS funciona en todos los navegadores actuales

Para cambiar el color de cualquier SVG

Agregue la imagen SVG usando una <img>etiqueta.

<img src="dotted-arrow.svg" class="filter-green"/>

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, la salida para #00EE00es
```
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
```
Genera un filterpara cualquier color aquí .

Agregue el CSS filtera esta clase.

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

Nov 16 '2018 11:11 Manish Menaria

Para cambiar el color de cualquier SVG, puede cambiar directamente el código SVG abriendo 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í puedes agregar tu propio color con la ayuda del atributo de estilo. Mira el siguiente ejemplo

<path 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.

Según el comentario de Daniel, podemos usar el atributo de relleno directamente en lugar del elemento de relleno dentro del atributo de estilo.

Dec 04 '2014 06:12 Sushant Pachipulusu