SVG har et meget cool og kraftfuldt element kaldet . Det er ret simpelt i konceptet. Den finder en anden bit SVG-kode, der refereres til af ID, og kloner den over inde i elementet.
Den mest basale brugssag ville være: Jeg har allerede tegnet denne form (er) en gang på siden, og jeg vil tegne den igen et andet sted. Gå og få den form (er), og tegn den igen.
Vi kan bruge denne evne som rodkoncept for (drumroll!) Og hele ikonsystemet! Vi kan tage alle de figurer, vi har til hensigt at bruge på siden, i en stor SVG-blok. Vi indpakker dem alle i et mærke, der er en semantisk måde at sige "Vi definerer bare disse ting, som vi kan bruge senere." Det gør også sikker på de vil ikke gengive (men du bør også display: none;den selv.
Det fungerer sådan her:
Den funky xlink:hrefattribut refererer til et ID andetsteds. Det ID kunne være på et hvilket som helst formelement, som et eller , eller det kunne være på en gruppe af elementer som en .
Bedst af alt i tilfælde af et ikonsystem kan det være på et element. Ud over at være korrekt semantisk (et ikon er et symbol, nej?), Kan elementet bære sin egen viewBox-attribut og tilgængelighedsinformation, ligesom og tags. Dette gør implementeringen meget let (som vist ovenfor).
Så du skal bare sørge for, at dette er defineret et andet sted i dokumentet:
Basketball Se Pen JoDmd af Chris Coyier (@chriscoyier) på CodePen.
