¿Puedo cambiar el color de relleno de una ruta svg con CSS?
Tengo el siguiente código:
<span>
<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
<desc></desc>
<defs/>
<path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
</svg>
</span>
¿Es posible cambiar el color de relleno de la ruta SVG con CSS o algún otro medio sin cambiarlo dentro de la <path>etiqueta?
Sí, puedes aplicar CSS a SVG, pero debes hacer coincidir el elemento, tal como cuando aplicas estilo HTML. Si solo desea aplicarlo a todas las rutas SVG, puede usar, por ejemplo:
path {
fill: blue;
}
El CSS externo parece anular el fillatributo de la ruta, al menos en los navegadores basados en WebKit y Gecko que probé. Por supuesto, si escribe, digamos, <path style="fill: green">eso también anulará el CSS externo.
Si desea cambiar el color al pasar el cursor sobre el elemento, intente esto:
path:hover{
fill:red;
}
EDITADO abril-2021
Si ingresa al código fuente de un archivo SVG, puede cambiar el color de relleno modificando la propiedad de relleno.
<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
Utilice su editor de texto favorito, abra el archivo SVG y juegue con él.
Descubrí otra forma de cambiar el color desde fuera del SVG, y es importando el contenido SVG y eliminando la regla de estilo donde se declara el relleno. Y luego controlar el relleno desde mi hoja de estilos CSS.
<svg width="100%" height="100%" viewBox="0 0 167 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="Pic_icon"><path id="Pic_icon1" serif:id="Pic_icon" d="M166.667,0l-166.667,0l0,133.333l166.667,0l-0,-133.333Zm-158.276,70.89l32.771,-33.148l48.814,49.375l31.519,-19.575l36.781,32.176l-0,-91.3l-149.885,0l-0,62.472Zm84.426,-36.017c11.25,0 20.384,9.164 20.384,20.451c0,11.287 -9.134,20.451 -20.384,20.451c-11.25,0 -20.384,-9.164 -20.384,-20.451c0,-11.287 9.134,-20.451 20.384,-20.451Z" <!-- remove this -> style="fill:#08e1ea;" -->/></g></svg>
Luego, dentro de mi archivo CSS, hago lo siguiente:
svg{ fill: green; }
Ahora que está eliminando la declaración de relleno de jerarquía superior del SVG, la que está afuera toma el control.
Esto me funciona sin ningún problema.
Pon todo tu svg:
fill="var(--svgcolor)"
En CSS:
:root {
--svgcolor: tomato;
}
Para utilizar pseudoclases:
span.github:hover {
--svgcolor:aquamarine;
}
Explicación
raíz = página html.
--svgcolor = una variable.
span.github = seleccionar un elemento span con una clase github, un ícono svg dentro y asignar una pseudoclase flotante.
