Kai turėsime tai, ką mes vadiname savo „defs bloku“ SVG - tai dalis SVG, kuri apibrėžia visus dalykus, kuriuos norime nupiešti vėliau - kur mes jį įdėsime? Iki šiol mes įdėjome jį tiesiai į HTML ir tai visiškai veikia. Jei paliksime jį puslapio viršuje, pasakykite iškart po pradine žyma:
Tai puikiai veiks visose naršyklėse, palaikančiose SVG.
Gali būti viliojanti tai sumažinti. Galbūt piktogramos nėra itin svarbios puslapiui, ne tokios gyvybiškai svarbios, kaip realus turinys, kurį turi pateikti jų puslapis, todėl piktogramas perkeliame į puslapio apačią, atidėdami jų įkėlimą, kaip dažnai darome su „JavaScript“. Tai bandome vaizdo įraše, tačiau kyla problemų dėl „Safari“ atvaizdavimo piktogramų, kurias vėliau bandėme padaryti . Tiesą sakant, mačiau nenuoseklų elgesį ar įvairius tipus kitose naršyklėse, taip pat tai darant, ir atrodo, kad kraštovaizdis šiuo atžvilgiu šiek tiek keičiasi. Taigi girdėjau: sunku įgyvendinti. Saugiausia įdėti bloką viršuje, jei galų gale pasiliksite defektus tiesiai į savo dokumentus.
Šiame vaizdo įraše apžvelgiame kai kuriuos pagrindinius viso to bandymus, tada apžvelgiame kai kurias realaus pasaulio svetaines, kuriose naudojama ši sistema ir kaip / kur įterpti „svg defs“ bloką.
Žr. Chriso Coyierio (@chriscoyier) „CodePen“ rašiklį 954e71cb5d5e79fb61d3c89bb3f21b8a.
Pastaba
Man patinka terminas „SVG defs block“ - kad tik galėtume jį pavadinti tuo, kas turi konkretų tikslą, bet iš tikrųjų neturi oficialaus pavadinimo. Tačiau ne visada reikia iš tikrųjų naudoti žymą. Kai naudojate s, jie vis tiek netaiko patys, ir iš tikrųjų nemanau, kad jie turėtų būti viduje . Girdėjau, kad gradientų apibrėžimai SVG yra tokie patys ir net neveiks, jei jie yra . Nepaisant to, tai vis tiek yra „SVG kodo blokas, kurį mes tik apibrėžiame naudoti vėliau“, todėl greičiausiai jį ir toliau vadinsiu „SVG defs bloku“.