¿Puedo cambiar el color de relleno de una ruta svg con CSS?

Question

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>&nbsp; 
    </span> 

¿Es posible cambiar el color de relleno de la ruta SVG con CSS o cualquier otro medio sin cambiar realmente dentro de la etiqueta de ruta?

Answer 1

Sí, puede aplicar CSS a SVG, pero debe hacer coincidir el elemento, al igual que al diseñar HTML. Si lo que desea es aplicarlo a todas las vías SVG, se puede utilizar, por ejemplo:

​path { 
    fill: blue; 
}​ 

CSS externo aparece para anular el atributo de la ruta fill, al menos en WebKit y navegadores basados ​​en Gecko que probé. Por supuesto, si escribe, digamos, <path style="fill: green">, eso también anulará el CSS externo.

Answer 2

si desea cambiar de color, coloca el cursor en el elemento, intente esto:

path:hover{ 
    fill:red; 
} 

Answer 3

me encontré con un recurso increíble en css-tricks: https://css-tricks.com/using-svg/

hay un puñado de soluciones explicó que hay .

Preferí la que requirió ediciones mínimas de la fuente svg, y tampoco requirió que se incrustara en el documento html. Esta opción utiliza la etiqueta <object>.

---

Añadir el archivo SVG en su html usando <object>; También declare los atributos html width y height. Usando estos valores de ancho y alto, el documento svg no se escala, trabajé alrededor de eso usando una declaración css transform: scale(...) para la etiqueta svg en mi archivo svg css asociado.

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object> 

Cree un archivo css para adjuntarlo a su documento svn. Mi ruta svg de fuente fue escalada a 16px, la incrementé a 64 con un factor de cuatro. Solo tenía una ruta, así que no tuve que seleccionarla más específicamente, sin embargo, la ruta tenía un atributo de relleno, así que tuve que usar !IMPORTANT para forzar el css a tomar precedente.

#svg2 { 
    width: 64px; height: 64px; 
    transform: scale(4); 
} 
path { 
    fill: #333 !IMPORTANT; 
} 

editar el archivo SVG objetivo, antes de la etiqueta de apertura <svg, para incluir una hoja de estilo; Tenga en cuenta que el href es relativo a la url del archivo svg.

<?xml-stylesheet type="text/css" href="myfile.css" ?> 

Answer 4

Si usted entra en el código fuente de un archivo SVG se puede cambiar el color de relleno mediante la modificación de 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.

Answer 5

pones este css para svg circle.

svg:hover circle{ 
    fill: #F6831D; 
    stroke-dashoffset: 0; 
    stroke-dasharray: 700; 
    stroke-width: 2; 
}