SVG turi labai šaunų ir galingą elementą, vadinamą . Tai gana paprasta koncepcija. Jis suranda kitą SVG kodo bitą, nurodytą ID, ir klonuoja jį elemento viduje .
Pats paprasčiausias naudojimo atvejis būtų: aš vieną kartą puslapyje jau nupiešiau šią formą (-as) ir noriu ją dar kartą nupiešti kitur. Eik, paimk tą formą (-as) ir nupiešk dar kartą.
Mes galime naudoti šį gebėjimą kaip pagrindinę (būgno!) Ir visos piktogramų sistemos koncepciją! Visas formas, kurias ketiname naudoti puslapyje, galime paimti viename dideliame SVG bloke. Juos visus apvyniosime žyme, kuri yra semantinis būdas pasakyti: „Mes tik apibrėžiame šiuos dalykus, kuriuos naudosime vėliau“. Ji taip pat užtikrina, kad jos nebūtų sugadintos (bet jūs taip pat turėtų pati.display: none;
Tai veikia taip:
Tas funky ieškantis xlink:hrefatributas nurodo ID kitur. Tas ID gali būti bet kuriame formos elemente, pvz., Arba , arba gali būti elementų grupėje, pvz ., A.
Geriausia, jei piktogramų sistema gali būti ant elemento. Be to, kad elementas yra semantiškai teisingas (piktograma yra simbolis, ne?), Elementas gali turėti savo „viewBox“ atributą ir prieinamumo informaciją, pavyzdžiui , žymes ir žymas. Tai labai palengvina diegimą (kaip parodyta aukščiau).
Taigi jūs tiesiog turite įsitikinti, kad tai yra apibrėžta kažkur kitur dokumente:
Basketball Žiūrėkite Chriso Coyier (@chriscoyier) „Pen JoDmd“ svetainėje „CodePen“.