Kui meil on olemas see, mida me nimetame oma SVG-i "defblokiks" - see osa SVG-st, mis määratleb kõik asjad, mida me tahame hiljem joonistada - kuhu me selle paneme? Siiani oleme selle otse HTML-i sisestanud ja see töötab absoluutselt. Kui jätame selle lehe ülaossa, öelge kohe pärast avamärgendit:
See töötab suurepäraselt kõigis brauserites, mis toetavad SVG-d.
Võib-olla on ahvatlev seda alla viia. Võib-olla pole ikoonid lehe jaoks üliolulised, mitte nii olulised kui tegelik sisu, mille nende leht on mõeldud edastama, nii et liigutame ikoonid selle asemel lehe alaossa, lükates nende laadimise edasi, nagu sageli teeme JavaScripti abil. Proovime seda videos, kuid on probleeme Safari ikoonide renderdamisega, mida hiljem proovisime . Kui aus olla, siis olen näinud, et ka teised brauserid on ebaühtlaselt käitunud või erinevat tüüpi, nii toimides ja tundub, et maastik on selles osas veidi nihkumas. Nii et ma olen kuulnud: on keeruline asi rakendada. Kõige turvalisem on plokk ülaosas asetada, kui lõpuks hoiate defekte oma dokumentides.
Selles videos vaatleme selle kõige mõningaid põhiteste ja seejärel mõnda reaalses maailmas veebisaiti, mis seda süsteemi kasutavad ja kuidas / kuhu nad lisavad svg defs-ploki.
Vaadake Chris Coyieri (@chriscoyier) CodePenilt Pen 954e71cb5d5e79fb61d3c89bb3f21b8a.
Märge
Mulle meeldib mõiste „SVG defs block” - lihtsalt selleks, et saaksime seda nimetada millekski, millel on kindel eesmärk, kuid millel tegelikult ametlikku nime pole. Kuid te ei pea alati silti tegelikult kasutama . Kui kasutate s, ei renderda need niikuinii iseseisvalt ja ma ei arva, et peaksin seal sees olema . Olen kuulnud, et SVG-s on gradientide definitsioonid ühesugused ega tööta isegi siis, kui need on . Sõltumata sellest on see ikkagi "SVG-koodi plokk, mille määrame alles hiljem kasutamiseks", nii et ma kutsun seda tõenäoliselt "SVG-defektide plokiks".