SVG ha un elemento molto interessante e potente chiamato . È piuttosto semplice nel concetto. Trova un altro bit di codice SVG, referenziato da ID, e lo clona all'interno dell'elemento.
Il caso d'uso più semplice sarebbe: ho già disegnato questa forma una volta sulla pagina e voglio disegnarla di nuovo da qualche altra parte. Prendi quella forma e disegnale di nuovo.
Possiamo usare questa capacità come concetto fondamentale per (rullo di tamburi!) E per l'intero sistema di icone! Possiamo prendere tutte le forme che intendiamo usare sulla pagina in un grande blocco SVG. Li avvolgeremo tutti in un tag che è un modo semantico per dire "Stiamo solo definendo queste cose da utilizzare in seguito". E 'anche sicuro che non renderanno (ma si dovrebbe anche display: none;la stessa.
Funziona così:
Quell'attributo dall'aspetto xlink:hrefstravagante fa riferimento a un ID altrove. Quell'ID potrebbe essere su un elemento di qualsiasi forma, come un o , oppure potrebbe essere su un gruppo di elementi come a .
Soprattutto nel caso di un sistema di icone, può essere su un elemento. Oltre ad essere corretto semanticamente (un'icona è un simbolo, no?), L' elemento può contenere il proprio attributo viewBox e le informazioni di accessibilità, come e tag. Ciò rende l'implementazione molto semplice (come mostrato sopra).
Quindi devi solo assicurarti che questo sia definito da qualche altra parte nel documento:
Basketball Guarda Pen JoDmd di Chris Coyier (@chriscoyier) su CodePen.