Kad mums ir tas, ko mēs saucam par SVG “defs bloku” - to SVG gabalu, kas nosaka visas lietas, kuras mēs vēlamies uzzīmēt vēlāk - kur mēs to ievietosim? Līdz šim mēs to ievietojām tieši HTML, un tas pilnīgi darbojas. Ja mēs to atstājam lapas augšdaļā, pasakiet tieši aiz sākuma taga:
Tas lieliski darbosies visās pārlūkprogrammās, kas atbalsta SVG.
Tas varētu būt vilinoši virzīties uz leju. Iespējams, ikonas nav īpaši svarīgas lapas atvēršanai, un tās nav tik svarīgas kā reālais saturs, ko to lapās paredzēts piegādāt, tāpēc mēs ikonas pārvietojam uz lapas apakšdaļu, atliekot to ielādi, kā mēs bieži darām ar JavaScript. Mēs to izmēģinām videoklipā, taču mums ir problēmas ar Safari ikonu renderēšanu, kuras mēs vēlāk mēģinājām vispār. Ja godīgi, es esmu redzējis, ka citās pārlūkprogrammās ir arī nekonsekventa uzvedība vai dažādi veidi, kā arī tas tiek darīts šādā veidā, un šķiet, ka ainava šajā ziņā nedaudz mainās. Tāpēc esmu dzirdējis: ir grūti īstenojama lieta. Visdrošāk ievietot bloku augšpusē, ja galu galā dokumentos saglabājat defus.
Šajā videoklipā mēs aplūkojam dažas šī pamata pārbaudes un pēc tam aplūkojam dažas reālās pasaules vietnes, kurās tiek izmantota šī sistēma, un to, kā / kur ievietot bloku svg defs.
Skatiet Kriss Koijers (@chriscoyier) vietnē CodePen Pen 954e71cb5d5e79fb61d3c89bb3f21b8a.
Piezīme
Man patīk termins “SVG defs block” - tikai tāpēc, lai mēs to varētu saukt par kaut ko tādu, kam ir noteikts mērķis, bet kuram patiesībā nav oficiāla nosaukuma. Bet jums ne vienmēr ir faktiski jāizmanto tags. Kad jūs izmantojat s, tie tik un tā netiek renderēti patstāvīgi, un es patiešām nedomāju, ka tiem vajadzētu būt iekšā . Esmu dzirdējis, ka SVG gradientu definīcijas ir vienādas un pat nedarbosies, ja tās atrodas . Neatkarīgi no tā, tas joprojām ir “SVG koda bloks, kuru mēs tikai definējam izmantot vēlāk”, tāpēc es, iespējams, turpināšu to saukt par “SVG defs bloku”.