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


200

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 algún otro medio sin cambiarlo realmente dentro de la etiqueta de ruta?



Hoy en día, puede incluir y diseñar archivos externos mediante <symbol>y <use>. Mira esta respuesta .
totymedli

Respuestas:


218

Sí, puede aplicar CSS a SVG, pero debe hacer coincidir el elemento, al igual que al diseñar 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 WebKit y Gecko que probé. Por supuesto, si escribe, digamos, <path style="fill: green">eso también anulará el CSS externo.


77
¿Esto todavía funciona con Chrome? Tengo dificultades para intentar cambiar el color de mi ruta SVG con CSS.
Dallas Clark el

55
Gracias Nicholas, creo que he encontrado la razón. Mi SVG fue incrustado en la página a través de una etiqueta <img>, CSS no parece poder modificar ningún contenido dentro. ¿Es esto correcto?
Dallas Clark el

40
Tenga en cuenta que para que el CSS para el estilo SVG, se tiene que incluir el código SVG en el marcado, no funciona si se incluye el SVG a través de la <svg>etiqueta.
Ricardo Zea

2
@RicardoZea Una advertencia para eso: puede incluir un objeto de un archivo SVG externo <use href="external.svg#objId" />y su CSS local aún se aplicará en algún grado.
Ken Bellows

1
@KenBellows Eso es cierto, lo he aprendido ahora. Una cosa a tener en cuenta es que necesitamos usar propiedades específicas de SVG en el CSS; de lo contrario, no funcionará. Por ejemplo, para cambiar el color de fondo que usa en fill: #000;lugar de background: #000;.
Ricardo Zea

39

si desea cambiar el color al pasar el cursor sobre el elemento, intente esto:

path:hover{
  fill:red;
}

28

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> 

Use su editor de texto favorito, abra el archivo SVG y juegue con él.


2
Técnicamente correcto basado en la redacción de la pregunta "... otros medios sin cambiarlo realmente dentro de la etiqueta de ruta" y funcionó exactamente como lo necesitaba. Tener un voto a favor!
Travis Watson

55
¿Cómo es esta una respuesta? La pregunta está en CSS, no en SVG nativo
zhuhang.jasper el

2
¿Tiene una respuesta de su propio Sr. Jasper?
Samuel Ramzan el

2
Esta no es la respuesta. Esta es la distorsión de la pregunta.
QMaster

16

pones este css para svg circle.

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

8

Encontré un recurso increíble sobre trucos css: https://css-tricks.com/using-svg/

Hay un puñado de soluciones explicadas allí.

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


Agregue el archivo svg a su html usando <object>; También declaró atributos html widthy height. Usando estos anchos y alturas, el documento svg no se escala, lo solucioné usando una transform: scale(...)declaración css para la svgetiqueta 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 de svg de origen se amplió a 16px, la amplié a 64 con un factor de cuatro. Solo tenía una ruta, por lo que no necesitaba seleccionarla más específicamente, sin embargo, la ruta tenía un atributo de relleno, así que tuve que usar !IMPORTANTpara forzar que el CSS tomara precedente.

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

Edite su archivo svg de destino, antes de la <svgetiqueta de apertura , para incluir una hoja de estilo; Tenga en cuenta que href es relativo a la url del archivo svg.

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

4

Puede usar esta sintaxis, pero requerirá algunos cambios en el archivo SVG. Y elimine cualquier relleno / trazo del SVG mismo.

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g, 
  must add viewBox on symbol just copy yhe viewbox from the svg tag itself
  must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
  <!-- add all the icon's paths and shapes here -->
  <path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0   C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136   c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857   c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262   C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939   c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06   C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>

icon.html

<svg><use xlink:href="file_path/location.svg#location"></use></svg>

"Eliminar cualquier relleno / trazo": eliminar el relleno y el trazo podría romper los svg (al menos los míos, al hacer esto en mi idea y ver el resultado en una ventana de vista previa). Alternativamente, uno puede usarcurrentColor
Frank Nocke

4

Es posible cambiar el color de relleno de ruta de la svg. Vea a continuación el fragmento de CSS:

  1. Para aplicar el color a toda la ruta: svg > path{ fill: red }

  2. Para solicitar la primera ruta d: svg > path:nth-of-type(1){ fill: green }

  3. Para solicitar la segunda ruta d: svg > path:nth-of-type(2){ fill: green}

  4. Para solicitar la ruta d diferente, cambie solo el número de ruta:
    svg > path:nth-of-type(${path_number}){ fill: green}

  5. Para admitir el CSS en Angular 2 a 8, use el concepto de encapsulación:

:host::ng-deep svg path:nth-of-type(1){
        fill:red;
    }

2

Pon todo en tu svg:

fill="var(--svgcolor)"

En CSS:

:root {
  --svgcolor: tomato;
}

Para usar pseudo-clases:

span.github:hover {
  --svgcolor:aquamarine;
}

Explicación

raíz = página html.
--svgcolor = una variable.
span.github = seleccionando un elemento span con un github de clase, un icono de svg dentro y asignando el cursor flotante de pseudo-clase.


Bienvenido a StackOverflow, Neto. Esto parece una buena respuesta. Gracias por ayudar.
srm
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.