2015-10-07 12 views
5

Qui possiamo vedere che gli SVG possono essere utilizzati nelle immagini di sfondo CSS.È possibile utilizzare SVG <use> in un'immagine di sfondo CSS?

.icon { 
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="16" viewBox="0 0 64 16"> <circle fill="blue" cx="8" cy="8" r="8"/> <circle fill="red" cx="24" cy="8" r="8"/> <circle fill="yellow" cx="40" cy="8" r="8"/> <circle fill="green" cx="56" cy="8" r="8"/> </svg>'); 
background-repeat: no-repeat; 
background-size: auto 100%; 
display: inline-block; 
} 

Ma è possibile implementare <svg><use xlink:href="svg.svg#mySVG"></use></svg>? Per me è un codice CSS non valido, ma potrei semplicemente fare qualcosa di sbagliato.

+0

Le immagini devono essere complete in un singolo file, quindi il riferimento '' deve essere interno all'immagine e non a un file esterno come lo si possiede. –

risposta

0

Questo verrà passato in W3C validator e A-checker senza errori. Inoltre, l'url della classe CSS non sarà un problema poiché stiamo specificando un percorso per CSS, e finché non sarà valido o corretto, il browser lo renderà.

Problemi correlati