Modifica del colore dell’immagine SVG con javascript

Sto cercando di alterare i colors dell’immagine svg con javascript. È ansible? Posso caricarlo come un object e quindi in qualche modo avere accesso al colore / immagine-dati.

Ogni respone o consiglio è molto apprezzato!

Certo, ecco un esempio (codice HTML standard omesso):

    

Questo è per SVG e className è .svgClass

  

Quindi il codice JavaScript è così:

 // change to red document.querySelector(".svgClass").getSVGDocument().getElementById("svgInternalID").setAttribute("fill", "red") 

Per cambiare svgInternalID devi aprire il file SVG che è plain .txt (cioè image.svg) e modificarlo

  

Dato un certo SVG:

 

Usando jQuery, ad esempio, puoi fare:

 var _currentFill = "#f00"; // red $svg = $("#octocat"); $("#face", $svg).attr('style', "fill:"+_currentFill); }) 

Ho fornito una demo del libro da colorare come risposta a un’altra domanda di stackoverflow: http://bl.ocks.org/4545199 . Testato su Safari, Chrome e Firefox.

Ecco un esempio completo che mostra come modificare il colore di riempimento di un svg referenziato tramite, e

Vedi anche Come applicare uno stile ad un SVG incorporato?

Per il colore di sfondo: è ansible accedere alla proprietà di fill in questo modo:

 svgElement.style.fill = '#fff'; 

Per impostare il colore del bordo, fare lo stesso per la proprietà del stroke .

Si prega di fare riferimento al riferimento W3C su SVG , in quanto è un problema generale.

Se si tratta solo del colore e non c’è un’esigenza specifica per JavaScript, è ansible convertirli in un font. Questo link ti dà l’opportunità di creare un font basato su SVG. Tuttavia, non è ansible utilizzare gli attributi img in seguito, come “alt”. Questo limita anche l’accessibilità del tuo sito web per i non vedenti e così via.

Creato sopra, ma con creazione dynamic e un’immagine vettoriale, non disegno.

 function svgztruck() { tok = "{d path value}" return tok; } function buildsvg( eid ) { console.log("building"); var zvg = "svg" + eid; var vvg = eval( zvg ); var raw = vvg(); var svg = document.getElementById( eid ); svg.setAttributeNS(null,"d", raw ); svg.setAttributeNS(null,"fill","green"); svg.setAttributeNS(null,"onlick", eid + ".style.fill=#FF0000"); return; } 

Puoi chiamare con:

  

Ora puoi aggiungere i colors per elemento secondario e manipolare direttamente tutti gli elementi della dom. È importante implementare la viewbox e la larghezza dell’altezza prima su svg html, non nell’esempio sopra riportato.

Non c’è bisogno di fare il tuo codice di 10 pagine quando potrebbe essere uno … ma chi sono io per discutere. Meglio usare PHP mentre ci sei.

L’elemento interno su cui svg si basa è un semplice con nient’altro.