Ho appena sviluppato una soluzione notevolmente più semplice. (Sì, so che questa è una vecchia domanda, ma qualcuno che sta cercando lo stesso problema potrebbe trovarlo utile.)
Stavo usando un SVG chiamato hamburger.svg. L'ho guardato con un editor di testo e non sono riuscito a trovare nulla che stesse impostando un colore per le tre linee - immagino che sia nero per impostazione predefinita perché questo è certamente il comportamento che ottengo - quindi ho semplicemente aggiunto un parametro "tratto" a la definizione di SVG. Non ha funzionato MOLTO - i bordi delle tre linee erano il colore scelto (bianco) ma il resto della linea era ancora nero, quindi ho aggiunto anche un parametro "riempimento". E questo ha funzionato!
Ecco il codice per l'originale hamburger.svg nella sua interezza:
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
Ed ecco il codice per il nuovo SVG dopo averlo modificato e salvato come hamburger_white.svg:
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z" stroke="white" fill="white"/></svg>
Come puoi vedere se scorri verso destra, tutto quello che ho fatto è stato aggiungere:
stroke="white" fill="white"
fino alla fine del percorso. L'altra cosa che dovevo fare era cambiare il nome del file dell'hamburger nell'HTML. Nessun problema con il CSS e nessuna necessità di rintracciare un'altra icona.
Easy-peasey! Puoi imitarlo per rendere il tuo hamburger del colore che preferisci.