SVG ir ļoti foršs un spēcīgs elements, ko sauc . Pēc koncepcijas tas ir diezgan vienkāršs. Tas atrod vēl vienu SVG koda bitu, uz kuru atsaucas ID, un klonē to elementa iekšpusē .
Visvienkāršākais izmantošanas gadījums būtu šāds: es jau vienu reizi esmu uz lapas (-ām) uzzīmējis (-as) šo formu (-as), un es vēlos to uzzīmēt citur. Iet, iegūstiet šo (-ās) formu (-as) un uzzīmējiet to vēlreiz
Mēs varam izmantot šo spēju kā saknes jēdzienu (drumroll!) Un visu ikonu sistēmu! Visas formas, kuras plānojam izmantot lapā, mēs varam uzņemt vienā lielā SVG blokā. Mēs tos visus iesaiņosim tagā, kas ir semantisks veids, kā pateikt: "Mēs tikai definējam šīs lietas, kuras vēlāk izmantot." Tas arī padara pārliecināts, ka viņi netiks atveidotas (bet jums vajadzētu arī pati.display: none;
Tas darbojas šādi:
Šis bailīgā izskata xlink:hrefatribūts atsaucas uz ID citur. Šis ID varētu būt uz jebkura formas elementa, piemēram, uz vai , vai arī uz tādu elementu grupas kā a .
Vislabākais ikonu sistēmas gadījumā tas var būt elements. Papildus tam, ka elements ir semantiski pareizs (ikona ir simbols, vai ne?), Elements var pārvadāt arī savu viewBox atribūtu un informāciju par pieejamību, piemēram, tagus un tagus. Tas ļoti atvieglo ieviešanu (kā parādīts iepriekš).
Tāpēc jums vienkārši jāpārliecinās, ka tas dokumentā ir definēts kaut kur citur:
Basketball Skatiet Krista Koijera (@chriscoyier) Pen JoDmd vietnē CodePen.