Cordial saludo compañeros e instructores, tengo la siguiente pregunta... ¿Por qué no puedo cambiar el color de una imagen SVG, desde una clase con un archivo Css, ya que solo puedo cambiar el color desde el mismo SVG con la propiedad Fill?
Solucionado
Cordial saludo compañeros e instructores, tengo la siguiente pregunta... ¿Por qué no puedo cambiar el color de una imagen SVG, desde una clase con un archivo Css, ya que solo puedo cambiar el color desde el mismo SVG con la propiedad Fill?
Hola Alumno, espero que estés bien.
La razón por la cual no puedes cambiar el color de una imagen SVG desde una clase con un archivo CSS es porque los archivos CSS controlan el estilo de los elementos HTML, no de los elementos SVG. La propiedad 'fill' que mencionas es una propiedad específica de SVG que controla el color de relleno de un elemento SVG.
Si tienes alguna duda, no dejes de preguntar. ¡Estamos aquí para ayudarte!.
¡Saludos!
Hola Bruno, muchas gracias por la información, estuve mirando unos tutoriales sobre ello y me di cuenta que importando el SVG con la propiedad webkit-mask:url(/imagenes/logo.svg) como imagen de mascara, así se puede modificar el color con estilos CSS como background e inclusive aplicar efectos degradado, pero efectivamente no puedo controlar los estilos de una imagen SVG sin tener que darle estilo de esa manera, considero que no es lo indicado y podrían haber también incompatibilidades. Así me quedo el código importando la imagen como imagen de mascara y dándole estilo con CSS.
<body><div class="logo"></body>
.logo {
-webkit-mask:url(/imagenes/logo.svg)no-repeat;
background: #000046;
width: 32px;
height: 48px;
}