Dodajanje prilagodljive vektorske grafike (SVG) v Nepodprt brskalnik
V prejšnji objavi v tej seriji smo omenili nekaj o pasti SVG s starimi brskalniki in uporabo Raphael.js, da bi grafiko uporabili kot alternativno rešitev. V tem prispevku bomo nadaljevali s to zadevo.
Ideja je preprosta, še vedno bomo uporabljali elemente SVG kot glavni način za prikazovanje grafik na naši spletni strani, hkrati pa bomo zagotovili tudi nadomestno funkcijo. tako, da se lahko še vedno upodablja v nepodprtih brskalnikih.
Seveda, obstaja veliko poti, ki jih lahko sprejmemo, vendar bomo preučili le dve rešitvi, za katere mislim, da je boljša generična rešitev. Torej, poglejmo, kako lahko to naredimo.
Uporaba elementa predmeta
Poleg postavitve neposredno v dokument HTML obstaja več načinov za vgradnjo SVG-ja. Na primer, če sliko shranimo v .svg datoteko, lahko uporabimo element.
Za predstavitveni namen smo na našo spletno stran dodali Appleov logotip s SVG. Vendar bodo nepodprti brskalniki ostali prazni. Za rešitev problema lahko uporabimo Bitmap grafiko, kot sledi;
Tako bodo podprti brskalniki še vedno sprejemali .svg, medtem nepodprti brskalniki bodo nosili Bitmap grafiko. Dodali smo “png” pod logotipom Apple označite, katera grafika je dostavljena.
Vendar, kot smo omenili v drugi objavi, Bitmap grafika ni tako prilagodljiva in prilagodljiva kot SVG. Torej, poglejmo drugo rešitev.
Uporaba Modernizr
Druga metoda, ki jo lahko uporabimo, je uporaba Modernizr. Za tiste med vami, ki ne poznajo te knjižnice JavaScript, ne skrbite, da bomo imeli namensko objavo, ki bo pokrila to. Za zdaj, samo sledite nam.
Najprej pripravimo nekatere potrebne knjižnice JavaScript, Modernizr.js in Raphael.js. Potem pa moramo spremeniti tudi naše .svg s tem orodjem v datoteko, ki jo podpira Raphael, ReadySetRaphael.js in izhod shrani v ločeno .js mapa; imejmo svg.js.
V dokument HTML vključite Modernzr.js:
In za druge dve datoteki, raphael.js in svg.js, to bomo pogojno naložili, samo, če je prikazana v nepodprtih brskalnikih.
Z Modernizrom bomo lahko zaznali zmožnost brskalnika, v tem primeru bomo zaznali, ali je brskalnik sposoben upodabljati SVG, in če ni, bomo strežniku ponudili:
če (! Modernizr.inlinesvg) document.write (''
