SVG ima zelo kul in močan element, imenovan . Koncept je precej preprost. Poišče še en bit SVG kode, na katerega se sklicuje ID, in ga klonira znotraj elementa.
Najosnovnejši primer bi bil: te oblike sem že enkrat narisal na strani in jih želim narisati nekje drugje. Pojdi po oblike in jih nariši znova.
To sposobnost lahko uporabimo kot korenski koncept (drumroll!) In celotnega sistema ikon! Vse oblike, ki jih nameravamo uporabiti na strani, lahko zavzamemo v enem velikem bloku SVG. Vse jih bomo zavili v oznako, ki je semantičen način, da rečemo: "Pravkar definiramo te stvari, ki jih bomo uporabili pozneje." Prav tako poskrbi, da ne bo postala (vendar pa naj bi tudi sama.display: none;
Deluje tako:
Ta zabaven xlink:hrefatribut se sklicuje na ID drugje. Ta ID je lahko na katerem koli elementu oblike, kot je ali , ali pa na skupini elementov, kot je .
Najboljše od vsega, če gre za sistem ikon, je lahko na elementu. Poleg tega, da je element pomensko korekten (ikona je simbol, ne?), Lahko vsebuje svoj lastni atribut viewBox in informacije o dostopnosti, kot so in oznake. Zaradi tega je izvedba zelo enostavna (kot je prikazano zgoraj).
Torej samo poskrbite, da bo to določeno nekje drugje v dokumentu:
Basketball Oglejte si Pen JoDmd Chrisa Coyierja (@chriscoyier) na CodePen.