¿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>&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?

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.

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

path:hover{
  fill:red;
}

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.

pones este css para svg circle.

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

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" ?>

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>

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;
    }

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.