Ha megvan az, amit az SVG defs blokkjának nevezünk - az SVG azon része, amely meghatározza az összes dolgot, amelyet később le akarunk rajzolni - hova tesszük? Eddig közvetlenül a HTML-be tettük, és ez abszolút működik. Ha az oldal tetején hagyjuk, mondjuk közvetlenül a nyitó címke után :
Ez kiválóan fog működni minden böngészőben, amely támogatja az SVG-t.
Csábító lehet ezt lefelé mozgatni. Lehet, hogy az ikonok nem túl fontosak az oldalak megjelenítéséhez, és nem annyira létfontosságúak, mint a valódi tartalom, amelyet az oldaluk megjeleníteni szándékozik, ezért az ikonokat az oldal aljára helyezzük, elhalasztva azok betöltését, mint gyakran a JavaScript használatakor. Ezt megpróbáljuk a videóban, de problémái vannak azzal, hogy a Safari egyáltalán megjeleníti azokat az ikonokat, amelyeket később megpróbáltunk . Hogy őszinte legyek, láttam, hogy más böngészőkben is következetlen viselkedés vagy különféle típusok vannak így, és úgy tűnik, hogy a táj kissé elmozdul ebben a tekintetben. Tehát hallottam: nehéz megvalósítani. A legbiztonságosabb, ha a blokkot a tetejére helyezzük, ha végül a dokumentumokban tartjuk a defeket.
Ebben a videóban megnézzük mindezek néhány alapvető tesztelését, majd megnézünk néhány valós weboldalt, amelyek ezt a rendszert használják, és hogyan / hova illesztik be az svg defs blokkot.
Lásd a Pen 954e71cb5d5e79fb61d3c89bb3f21b8a cikket, Chris Coyier (@chriscoyier) a CodePen-en.
jegyzet
Szeretem az „SVG defs block” kifejezést - csak azért, hogy nevezhessük valaminek, amelynek van egy konkrét célja, de valójában nincs hivatalos neve. De nem mindig kell címkét használni . Ha használod az s-t, azok amúgy sem renderelnek önmagukban, és valóban nem hiszem, hogy állítólag belül lennének . Hallottam, hogy a gradiensek meghatározása az SVG-ben megegyezik, és nem is fog működni, ha a . Ettől függetlenül ez továbbra is „az SVG kód blokkja, amelyet később definiálunk, de később valószínűleg„ SVG defs blokknak ”fogom nevezni.