2015-07-11 26 views
5

Come posso aggiungere un svg alla mia pagina Web e cambiarne il colore tramite css?Aggiungi svg alla pagina web?

ho provato:

<img src="my.svg" class="svg"/> 

.svg{ 
    fill: white; 
} 

ma senza fortuna.

Solo soluzioni CSS, per favore, e non ho bisogno di fallbacks, solo supportando nuovi browser.

+0

Ci sono molti modi per includere uno SVG, date un'occhiata qui: https://css-tricks.com/using-svg. È importante dire che alcuni modi possono sembrare più semplici (come usare un tag '' come lo hai fatto o usarlo come 'background-image') ma causa solo il problema che stai affrontando: impossibilità di collegare CSS esterni all'interno di SVG , cioè lo stile della pagina non si riflette all'interno del file SVG caricato. –

risposta

1

Non funzionerà in questo modo. È possibile cambiare il colore di riempimento, se siete tra cui direttamente il formato SVG, vale a dire:

HTML:

<p>Some other webpage content</p> 
<svg class="my-svg"> 
    <g> 
     <path fill="..."></path> 
     <path fill="..."></path> 
    </g> 
</svg> 
<p>Some other webpage content</p> 

CSS:

.my-svg *{ 
    fill:white; 
} 

Quindi, è web-ispezionare my.svg, e della copia incolla il suo contenuto nella pagina di destinazione. Quindi puoi modellarlo.

Problemi correlati