img src SVG cambiando los estilos con CSS

HTML

<img src="logo.svg" alt="Logo" class="logo-img">

CSS

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

El svg anterior se carga y es de forma nativa fill: #fff, pero cuando uso el anterior csspara intentar cambiarlo a negro, no cambia. Esta es la primera vez que juego con SVG y no estoy seguro de por qué no funciona.

Jul 24 '14 19:07 ngplayground

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

HTML

<div class="logo"></div>

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/
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Compruebe si su navegador admite esta función: https://caniuse.com/#search=mask

May 11 '2017 13:05 André Kuhlmann

Pruebe CSS puro:

.logo-img {
  /* to black */
  filter: invert(1);
  /* or to blue */
  filter: invert(0.5) 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/

Aug 27 '2018 14:08 Feri

Si su objetivo es simplemente 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, simplemente:

Abre tu logo.svgen un editor de texto.
búscalo fill: #fffy reemplázalo confill: #000

Por ejemplo, logo.svgpodría verse así cuando se abra en un editor de texto:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>

... simplemente cambia el relleno y guarda.

Jan 16 '2016 14:01 Rowe Morehouse

Si desea un color dinámico, no desea utilizar javascript y no desea un SVG en línea, utilice una variable CSS. Funciona en Chrome, Firefox y Safari. editar: y borde

<svg>
    <use href="logo.svg" style="--color_fill: #000;"></use>
</svg>

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

Aug 03 '2018 01:08 northamerican

Edite su archivo SVG, agréguelo fill="currentColor"a la etiqueta svg y asegúrese de eliminar cualquier otra propiedad de relleno del archivo.

Por ejemplo:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 139.435269383854" id="img" fill="currentColor">...
</svg>

Tenga en cuenta que currentColores una palabra clave (no un color fijo en uso).

Después de eso, puedes cambiar el color usando CSS, estableciendo la colorpropiedad del elemento o desde su padre.

Ejemplo:

.div-with-svg-inside {
    color: red;
}

Se me olvidó decir que debes insertar el SVG de esta manera:

<svg>
   <use xlink:href='/assets/file.svg#img' href="/assets/file.svg#img"></use>
</svg>

si la imagen proviene de alguna variable entonces

<svg>
  <use [attr.xlink:href]="somevariable + '#img'" [attr.href]="somevariable + '#img'"></use>
</svg>

Tenga en cuenta que #imges la identificación de la svgetiqueta dentro del archivo svg. Además, tenga en cuenta xlink:hrefque ha quedado obsoleto; en su lugar, debe usar hrefo puede usar ambos para admitir versiones anteriores del navegador.

Otra forma de hacerlo: https://css-tricks.com/cascading-svg-fill-color/

Jun 23 '2020 20:06 Modesto