Posso cambiare il colore di riempimento di un percorso svg con CSS?

Ho il codice seguente:

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

È possibile cambiare il colore di riempimento del percorso SVG con CSS o altri mezzi senza modificarlo all'interno del tag percorso?

Sì, è possibile applicare CSS a SVG, ma è necessario abbinare l'elemento, proprio come quando si disegna lo stile HTML. Se si desidera solo applicarlo a tutti i percorsi SVG, è possibile utilizzare, ad esempio:

​path {
    fill: blue;
}​

Il CSS esterno sembra sovrascrivere l' fillattributo del percorso , almeno nei browser basati su WebKit e Gecko che ho testato. Ovviamente, se scrivi, diciamo, anche <path style="fill: green">quello sovrascriverà CSS esterno.

se vuoi cambiare colore passando con il mouse sull'elemento, prova questo:

path:hover{
  fill:red;
}

Se si entra nel codice sorgente di un file SVG, è possibile modificare il riempimento colore modificando la proprietà di riempimento.

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

Usa il tuo editor di testo preferito, apri il file SVG e gioca con esso.

hai messo questo css per svg circle.

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

Mi sono imbattuto in una straordinaria risorsa su css-tricks: https://css-tricks.com/using-svg/

Ci sono una manciata di soluzioni spiegate lì.

Ho preferito quello che richiedeva modifiche minime al sorgente svg, e inoltre non richiedevo che fosse incorporato nel documento HTML. Questa opzione utilizza il <object>tag.

Aggiungi il file svg nel tuo html usando <object>; Ho anche dichiarato gli attributi HTML widthe height. Usando queste larghezze e altezze il documento svg non viene ridimensionato, ho risolto il problema usando transform: scale(...)un'istruzione css per il svgtag nel mio file svg css associato.

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

Crea un file CSS da allegare al tuo documento svn. Il mio percorso svg di origine è stato ridimensionato a 16px, l'ho ingrandito a 64 con un fattore quattro. Aveva solo un percorso, quindi non avevo bisogno di selezionarlo in modo più specifico, tuttavia il percorso aveva un attributo di riempimento, quindi ho dovuto usare !IMPORTANTper forzare il CSS a prendere il precedente.

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

Modifica il tuo file svg di destinazione, prima del <svgtag di apertura , per includere un foglio di stile; Nota che href è relativo all'URL del file svg.

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

È possibile utilizzare questa sintassi ma richiederà alcune modifiche nel file SVG. E rimuovi qualsiasi riempimento / tratto dallo stesso SVG.

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>

È possibile cambiare il colore di riempimento del percorso dello svg. Vedi sotto per lo snippet CSS:

1. Per applicare il colore per tutto il percorso: svg > path{ fill: red }

2. Per richiedere il primo percorso d: svg > path:nth-of-type(1){ fill: green }

3. Per richiedere il secondo percorso d: svg > path:nth-of-type(2){ fill: green}

4. Per richiedere il diverso percorso d, modificare solo il numero del percorso:
   svg > path:nth-of-type(${path_number}){ fill: green}

5. Per supportare il CSS in Angolare da 2 a 8, utilizzare il concetto di incapsulamento:

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

Inserisci tutto il tuo svg:

fill="var(--svgcolor)"

In Css:

:root {
  --svgcolor: tomato;
}

Per usare le pseudo-classi:

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

Spiegazione

root = pagina html.
--svgcolor = una variabile.
span.github = selezionando un elemento span con un github di classe, un'icona svg all'interno e assegnando il passaggio del mouse pseudo-classe.