Įdėti tą „SVG defs“ bloką dokumento viršuje tikrai veikia. Tai taip pat turi tam tikrų pranašumų, pavyzdžiui, tai, kad nereikia pateikti HTTP užklausos, visa grafikos piešimo informacija yra puslapyje. Tačiau jis taip pat turi tam tikrų trūkumų. Visą tą informaciją naršyklė turi išanalizuoti kiekviename puslapyje iš dokumento. Tai nėra atskiras dokumentas, kurį klientas jau gali laikyti talpykloje, kaip gali būti kitas turtas. Kalbant apie talpyklą, jei jūsų svetainė talpina HTML talpyklas (paprastai tai yra gera idėja), galite apsvarstyti šį „puslapio talpyklos išsiplėtimą“, nes kiekviename talpykloje esančiame puslapyje yra šis didelis pasikartojantis kodo blokas - tai nėra labai efektyvus serverio talpyklos naudojimas.
Geros naujienos yra tai, kad galime perkelti SVG defektų blokavimą į išorinį failą ir naudoti jį taip, kaip norėtume paveikslėlį ar kitą turtą.
Kai mes tada jį naudosime, failo kelias būtų atribute, pavyzdžiui:
Svarbu žinoti: tarpdomeniniai apribojimai yra griežti. Net CORS antraštės jums nepadės pagal mano patirtį. Taigi jokių CDN (net negali žaisti „CodePen“ ir tikrai negali žaisti faile: // URL).
Kitas svarbus dalykas, kurį reikia žinoti: Kad tai veiktų, būtinai reikia xmlns atributo. Kaip ir jūsų SVG defs blokas turėtų prasidėti:
Man susidarė įspūdis, kad jums to nereikia HTML5 dokumente (panašiai kaip jums nereikia tipų s), bet galbūt todėl, kad šis failas nebėra HTML5 dokumento ribose (jis yra išoriškai nurodoma), jums to reikia.
Dėl šios priežasties demonstracinė versija yra čia.
Ne mažiau svarbu žinoti: jokia IE versija to nepalaiko (iki 11 šios publikacijos metu). Tačiau yra būdas ją pasiekti, iš esmės „Ajaxing“ į jums reikalingą SVG bitą ir įterpdami ją ten, kur būtų, kad tai būtų „normalus“ įterptas SVG. Tai užtrunka karštą minutę, kol tai veikia ir išbandoma „Internet Explorer“ naudojant „BrowserStack“, bet galų gale mes tai gauname.
Failai
- 16-svg4everybody.js
- 16-svg-defs-test.svg