Scalable Vector Graphics (SVG) įtraukimas į nepalaikomą naršyklę
Ankstesniame šios serijos įraše paminėjome šiek tiek apie SVG sunkumus su senomis naršyklėmis ir naudojant „Raphael.js“ grafiką kaip alternatyvų sprendimą. Šiame pranešime mes peržiūrėsime šį klausimą toliau.
Idėja yra paprasta, mes vis dar naudosime SVG elementus kaip pagrindinį būdą pristatyti grafiką mūsų tinklalapyje, tačiau tuo pačiu metu taip pat suteiksime atsarginę funkciją taip, kad ji būtų vis dar teikiama nepalaikomose naršyklėse.
Žinoma, yra daugybė būdų, kuriuos galime priimti, bet tik į du sprendimus, kuriuos manau, yra geresnis bendras sprendimas. Taigi, pažiūrėkime, kaip galime tai padaryti.
Objekto elemento naudojimas
Be to, kad jis būtų tiesiogiai įterptas į HTML dokumentą, SVG galima įterpti keliais būdais. Pavyzdžiui, jei išsaugome grafiką .svg failą, galime naudoti elementas.
Demonstravimo tikslais į mūsų tinklalapį pridėjome „Apple“ logotipą su SVG. Tačiau nepalaikomos naršyklės išliks tuščios. Norėdami išspręsti šią problemą, galime pateikti Bitmap grafiką, kaip nurodyta toliau;
Tokiu būdu palaikomos naršyklės vis dar bus naudojamos .svg, kol nepalaikomose naršyklėse bus rodomas „Bitmap“ grafikas. Pridėjome “png” pažymėkite „Apple“ logotipą, kad būtų galima stebėti, kuris grafikas yra pristatomas.
Tačiau, kaip jau minėjome kitame pranešime, Bitmap grafika nėra tokia lanksti ir pritaikoma kaip SVG. Taigi, pažvelkime į kitą sprendimą.
Naudojant „Modernizr“
Kitas būdas, kurį galime naudoti, yra naudojant Modernizr. Tiems iš jūsų, kurie nėra susipažinę su šia „JavaScript“ biblioteka, nesijaudinkite, kad turėsime tam skirtą postą. Šiuo metu tiesiog sekite su mumis.
Visų pirma, parengsime keletą reikalingų „JavaScript“ bibliotekų, Modernizr.js ir Raphael.js. Tada mes taip pat turime konvertuoti mūsų .svg failą į „Raphael“ palaikomą formatą su šiuo įrankiu, „ReadySetRaphael.js“ ir išsaugokite išvestį į atskirą .js failą; pavadinkime jį svg.js.
Įtraukite „Modernzr.js“ į HTML dokumentą, pvz .:
Ir kitiems dviem failams, raphael.js ir svg.js, mes jį įkeliame sąlyginai, tik tada, kai jis peržiūrimas nepalaikomose naršyklėse.
Su „Modernizr“ galime aptikti naršyklės galimybes, tokiu atveju mes nustatysime, ar naršyklė gali pateikti SVG, ir jei ne, mes tarnausime scenarijų:
jei (! Modernizr.inlinesvg) document.write (''
