Hazırlayan: Evgeni Ryzhkov Nəşr tarixi: 27/08/2010

Ən son yeniləmə: 17.11.2010

Tapşırıq

HTML səhifəsində SVG şəklini göstərin.

Bunu etmək üçün bir neçə yol var, lakin onların hamısı cross-brauzer deyil.

iframe vasitəsilə SVG

Çoxları üçün çərçivənin olması artıq son qoyur bu üsul. İndiki vaxtda daha çox var mükəmməl yollar bu problemin həlli yolları. Bundan əlavə, bu formada şəffaf şəkilləri həyata keçirmək mümkün olmayacaq (çərçivənin fonu var) və xarici skriptlərdən şəklin elementlərinə giriş də yoxdur.

Obyekt vasitəsilə SVG

Brauzeriniz SVG formatını dəstəkləmir

Bizdə: etibarlıdır təmiz kod, alternativ mətn, burada istifadəçiyə şəkilləri görmədikdə nə etməli olduğuna dair təlimat verə bilərsiniz (məsələn, sayta göndərin normal brauzer və ya quraşdırılması ona kömək edəcək bir plaginə keçid verin). Bu tətbiq SVG təsvirində şəffaflığı dəstəkləyir (baxmayaraq ki, IE-də problem var: şəffaf sahələr ağ rənglə doldurulacaq). Minuslardan: şəkillərə təsir etmək üçün heç bir yol yoxdur xarici skriptlər(HTML-dən), yalnız SVG faylının özündə olanlar.

Metod üçün yaxşıdır fon şəkilləri və ya hər hansı statik şəkillər.

embed vasitəsilə SVG

Bu üsul HTML-dəki skriptlərə SVG faylının məzmunu ilə qarşılıqlı əlaqə yaratmağa imkan verir (hələ buna nail ola bilməmişəm). IE üçün o, SVG şəklinin şəffaf sahələrini düzgün göstərməyə kömək edəcək wmode() atributuna malikdir. Pluginpage atributu brauzeri SVG-ni dəstəkləməyən istifadəçini onlara kömək edəcək plagin səhifəsinə göndərməlidir. Reallıqda təmiz forma Bu atributda sıfır məna var. Bu, Adobe-nin tövsiyə etdiyi seçimdir düzgün əməliyyat SVG Viewer-dən. Bu üsul doğrulamadan keçməyəcək.

Bu üsul indi çox populyardır.

HTML kodunda SVG

XHTML + SVG

• İstifadə olunan ad sahəsinə diqqət yetirməlisiniz: xmlns:svg="http://www.w3.org/2000/svg">;
• sənəd xhtml formatında olmalıdır (yerli olaraq .xhtml uzantılı fayldır)
• Bu metodun brauzerlər arası uyğunluğu zəifdir. IE-nin cavabı xüsusilə pisdir;
• html kodu inanılmaz dərəcədə çirklənir.

İndi bu üsuldan istifadə etməmək daha yaxşıdır.

Qeyd

IE, o cümlədən 8 versiyaları SVG-ni dəstəkləmir. O zaman Microsoft öz formatını - VML-ni fəal şəkildə təbliğ edirdi. Buna görə də, SVG şəklini orada görmək üçün bu brauzerlə işləməli olacaqsınız (bu barədə daha çox növbəti məqalələrdə).

Parlaq gələcək

Göründüyü kimi, yaxın gələcəkdə SVG formatı veb tərtibatçılarının həyatına hərtərəfli daxil olacaq. Bunun təsdiqi olaraq artıq təsvirləri tapmaq olar maraqlı yollar SVG-nin həyata keçirilməsi. Brauzer tərtibatçıları deyirlər ki, onların yaradıcılığının yeni versiyaları aşağıdakı SVG inteqrasiya üsullarının bir qismini və ya hamısını dəstəkləyəcək.

Hərfi mənada: genişlənə bilən vektor qrafikası. MVG? SVG! IN vektor formatları Saxlanılan şəklin özü deyil, nöqtələr və əyrilərdən istifadə edərək onu qurmaq üçün təlimatlar saxlanılır.

IN rastr formatları haqqında məlumat xüsusi nömrə görüntü nöqtələri ikili kərpicə sıx şəkildə yığılmışdır. Ona baxmaq faydasızdır və onu yalnız qrafik redaktorlarda dəyişə bilərsiniz.

�PNG IH�aV PLTE�������0� IDacZ�d���� �W= S�3�o;���]P ���IEND�B`�~

SVG formatı həmçinin Illustrator, Sketch və ya Inkscape kimi qrafik redaktorlarda yaradıla və dəyişdirilə bilər. Lakin o, həm də mətn əsaslıdır, yəni istənilən kod redaktorunda HTML və ya CSS kimi açıla bilər.

Sizə daha çox məlumat verəcəyəm: SVG ayrı bir HTML səhifəsi kimidir. SVG daxil etdiyiniz zaman siz əslində sadəcə bir şəkil deyil, bütün səhifəni daxil edirsiniz. Öz koordinat sistemi, görünüşü, üslubları, skriptləri və heyrətamiz xüsusiyyətləri ilə.

Üslublar və ssenarilər, Karl! Budur sizin üçün sadə bir şəkil.

SVG kimi baxsanız ayrı səhifə- hansı daxiletmə metoduna ehtiyacınız olduğu daha aydın olur. Dörd əsas var və hər birinin öz xüsusiyyətləri var.

Birinci və ən sadə elementdir düz HTML kodunda. Bu, əsasən, ən çox təsirli yoldur istənilən şəkli yükləyin - brauzerlər HTML kodundan onun mövcud olduğunu əvvəlcədən bilir və onu yükləməyə başlayır.

İşin mənfi tərəfi odur ki, belə bir SVG-də skriptlər işləməyəcək və içəridəki elementlərlə qarşılıqlı əlaqə yaratmaq cəhdləri məhvə məhkumdur. Fayl şüşə arxasında olduğu kimi olacaq: ona baxa bilərsiniz, amma toxuna bilməzsiniz. CSS animasiyaları da daxil olmaqla, hər şey içəridə yaxşı işləyir.

Bu üsul qarşılıqlı əlaqəyə ehtiyacı olmayan məzmun şəkilləri üçün ən uyğundur: loqolar, qrafiklər, diaqramlar.

İkinci yol - fon şəkli CSS-də. Üstəlik, onu elementə, psevdo elementə təyin etməyiniz və ya məzmun daxil etməyiniz fərq etməz - nəticə ilə eyni olacaq : şüşə arxasında, amma içəridə nəsə işləyir.

.şəkil (fon şəkli: url(picture.svg); )

Bu üsul qarşılıqlı əlaqəyə ehtiyacı olmayan dizayn qrafikası üçün uyğundur: fonlar, nişanlar və digər kiçik şeylər.

Üçüncü üsul, vasitəsilə, nəhayət, səhifə və SVG faylının daxili hissələri arasındakı şüşəni qırır. Skriptlər, qarşılıqlı əlaqə, animasiya işi - əgər onlar SVG daxilində təsvir edilmişdirsə. Brauzer SVG-ni bilmirsə görünəcək teqlər arasında ehtiyat əlavə edə bilərsiniz.

Əslində, siz başqa bir səhifəni birləşdirən kimi istifadə edə bilərsiniz. Amma daha yaxşı işləyir və şəklin ölçüsünə uyğunlaşır.

Çeviklik üçün ödənilməli bir qiymət var: o, artıq sadəcə qrafika olmadığına və skript edilə bildiyinə görə, bu metodun digər təhlükəsizlik tələbləri var. Məsələn, başqa bir domendən bir şəkil əlavə edə bilməzsiniz.

Bu üsul bəziləri daxil etmək lazım olduqda uyğundur interaktiv qrafika: oyuncaqlar, qrafika və mürəkkəb hər şey. Flash videolarının bir dəfə daxil edildiyini xatırlamaq kifayətdir. Valideynlərinizdən bunun nə olduğunu soruşun.

Dördüncü üsul, brauzerlər HTML təhlilçilərini yeni standarta yenidən yazdıqda və SVG fayllarının məzmunu hər hansı digər teqlər kimi birbaşa səhifəyə daxil edilə bildikdə işə başladı.

Kvadrat

Bu SVG ilə siz adi HTML elementləri ilə eyni şeyi edə bilərsiniz: üslublar, skriptlər - yaxşı, bilirsiniz. Siz, məsələn, hoverdə doldurma rəngini dəyişə və hər şeyi ümumi üslublarda təsvir edə bilərsiniz.

rect:hover (doldurun: #090; )

İşin mənfi tərəfi odur ki, bu cür şəkillər səhifədən ayrıca yaddaşda saxlanılmır - baxmayaraq ki, bu, simvollar və istifadəçi adları vasitəsilə yayınıla bilər, lakin bu uzun hekayədir, bu barədə ayrıca danışacağıq.

SVG sadəcə bir qrafik formatından daha çox şeydir - biz bunu artıq başa düşdük. Daha dərin qazmaq istəyirsiniz? Sarah Suaidan'ın məqalələrini oxuyun, bu, indiyə qədər olan ən yaxşısıdır. Bütün linklər videonun təsvirindədir.

Nəticədə: bir çox yol var və hamısı müəyyən mənada yaxşıdır. Ehtiyaclarınıza uyğun olanı seçin, lakin həmişə ən sadələrindən başlayın: və fon, sonra onu çətinləşdirin - kifayət deyilsə.

Video versiyası

• Dərslik

Bizə lazımdır:

SVG istifadə edərək öz ikonalarınızı vebsaytınıza quraşdırın.

Onlarla idarə olunmalıdır CSS istifadə edərək(forma, ölçü, doldurma, onların davranışı da daxil olmaqla effektlər).

Onlar yüngül olmalıdır və http sorğularını saxlamaq üçün bir yerdə olmalıdır.

Bütün əsas müasir brauzerlərdə işləyir.

demo Bunu niyə yazıram? Brauzerdə vektorun artan populyarlığına, yaşı və brauzer dəstəyinə baxmayaraq, yaxşı qərarlar Mənə elə gəlir ki, çox az istifadə olunur. İcazə verin izah edim. Əlbəttə ki, SVG haqqında çox yazılıb və danışılıb. Hətta birlikdə SVG və CSS haqqında. Ancaq bir veb sayt üçün SVG nişanları etmək ehtiyacı ilə üzləşəndə ​​yaxşı çevik həllər tapa bilmədim. Brauzerdəki SVG indi unudulmuş qocaya bənzəyir, saçlarını daramaq, tozunu silkələmək və idman zalına göndərmək vaxtıdır. Ümid edirəm ki, bu məqalədə təsvir olunan üsul kimsə üçün faydalı olacaq.

Dərhal deyəcəyəm, bəli, ikon şriftlərindən istifadə etdim, problemlər buradadır:
1. Belə nişanlar brauzerdə və Windows-da şrift kimi təqdim olunur, məsələn, onlar tez-tez sabunlu kənarlarla bitir. Bu problemi həll etməli olan CSS xüsusiyyətləri var, lakin onlar yalnız WebKit-də və yalnız MAC-də işləyirlər - yəni faydasızdırlar. Dizayner and içdi.
2. Yalnız Chrome 23-də və yalnız Windows-da bu şrift yoxa çıxmağa başladı və bəzi hallarda saytın qalan hissəsini ciddi şəkildə "yırtdı". Mən bu şriftlərdən dəfələrlə istifadə etmişəm, lakin bu, öz ikonalarımla ilk dəfədir. Və belə bir problem ilk dəfədir.
3. Əlavə etmək mümkün deyil daxili kölgə. Layihədə bu məcburi idi. Dizayner and içdi.
4. Belə bir şriftin çəkisi. SVG ilə heç bir müqayisə yoxdur.
5. Yenə də SVG var daha çox imkanlarşriftlə müqayisədə.

Başlayaq və ya ilkin məlumatlar. İlkin məlumatlar - təmiz HTML sənədi ona bağlı main.css ilə və ya ikonalarımızın üslublarını yazacağımız yer.
Bədən etiketinə SVG sənədini də əlavə edəcəyik. Orada defs bölməsində ikonalarımızın formalarını klip yolu və onlar üçün filtrlər (daxili kölgə) şəklində elan edəcəyik.
SVG-ni nadinc qocadan necə elan etməyi öyrənmək daha yaxşıdır, çünki o, ən seçicidir.

Nişan şəklinin əlavə edilməsi SVG kodunu necə əldə etmək olar, məncə onu yazmağa ehtiyac yoxdur? Sadəcə olaraq SVG faylını açın mətn redaktoru və ya Illustrator kimi istənilən vektor redaktorundan istifadə edin. Aydınlıq üçün burada mən yalnız HTML sənədimizdən SVG kodunu göstərirəm (bu, bədən etiketində olduğunu unutmayın). clipPath teqi yaradın və ona SVG ikon forması əlavə edin.

Ürək simvolu üçün yol yaratdıq. Zəhmət olmasa clipPath teqinin id="heart-path" atributuna diqqət yetirin.
Onun vasitəsilə biz ikonamızın formasına istinad edəcəyik.

Nişanların əlavə edilməsi Biz ikonamızı HTML sənədinə daxil edirik. O, içərisinə kvadrat daxil edilmiş kiçik SVG sənədindən ibarətdir:

Dərhal yanaşmanın kiçik bir çatışmazlığını görürük - simge iki elementdən ibarətdir. Problem, mənim fikrimcə, bütün ikonların quruluşu tamamilə eyni olduğu üçün dözümlüdür. Əgər bir şey varsa, bütün layihə boyunca axtarış edərək asanlıqla tapa/dəyişdirə/çıxara bilərsiniz.

512 rəqəminə diqqət yetirin. Bu, redaktorda ikona çəkilən zaman onun yazıldığı kvadratın ölçüsüdür. Simgeninizlə fərqli ola bilər. Ürək nişanı sinfi CSS-də simvolun formasını təyin etmək üçündür, ikona sinfi bütün nişanlar üçün birləşdirici sinifdir (onlardan çox olacaqmı?).

Son addım. CSS əlavə edilməsi Gəlin görək nə baş verir. Hər şeyi düzgün etmisinizsə, 512x512 piksel ölçülü qara kvadrat görəcəksiniz. Maleviç artıq təsdiq edir. Ancaq qorxuram, heç kim bizim Suprematizm manifestini qiymətləndirməyəcək. Davam edək.

Hər şey düzgündür, heç bir nişan yoxdur? Gəlin əyləncəli hissəyə - CSS-ə keçək.

Sənədə qoşulduğumuz main.css-də ürək-icon və icon sinifləri üçün üslublar yazırıq.

Icon( width:32px; height:32px; cursor:pointer; fill: #ccc; ) Qara kvadratımız boz və 32x32 piksel olur. Doldurma xüsusiyyəti ikonamızın doldurulmasını təyin edir.

Ürək nişanı düz( clip-path:url("#heart-path"); ) Nəhayət, ikona forması görünür! clip-path məhz brauzeri #heart-path boyunca şəkli almağa və onu kvadrata tətbiq etməyə məcbur edən xüsusiyyətdir.

Simge üçün davranış əlavə edək. Bunlar :hover, :aktiv vəziyyətlər və yoxlanılmış sinif olacaq.

Ürək ikonası düz( klip yolu:url("#ürək yolu"); ) .icon:hover( doldurun: #999; ) .icon:aktiv, .icon.checked( doldurun:qırmızı; )

Daxili kölgə əlavə etmək Bunun üçün biz SVG filtrindən istifadə edəcəyik.
Dərhal xəbərdarlıq edirəm. Bu misal üçün, onların üstündəki filtrdən istifadə edərkən ikonalarla bir az çətinlik çəkdim. Onların bəziləri bəzən yoxa çıxırdı. Bəzən. Bəlkə də yalnız mənim üçün. Diqqətli olun. Və daha bir problem - filtrin gözəl tətbiqi üçün simvola başqa bir element əlavə etməlisiniz. Bəli, ayıbdır. İndi filtr işarəsi = 3 elementdir. Buna görə dəbli bir mənzil dizaynı üçün pul ödəməlisinizsə, çekinmeyin.

Bir element əlavə edək:
Etiket filtr üçün istifadə olunan elementdir.

Sənədin SVG bölməsinə filtr əlavə edin:

Mən filtrin necə işlədiyini təsvir etməyəcəyəm. Bunu internetdə asanlıqla oxuya bilərsiniz. Bu ayrı bir yazı üçün mövzudur. Sadəcə şərhlərlə əhatə edəcəm.
Nəzərə alın ki, filtrdə id="inset-shadow" da var.

Nişanlara kölgələr əlavə etmək
.icon g( filter:url("#inset-shadow") )
Hamısı budur. Mən sizə yazmaq istərdim. Amma bu doğru olmazdı.

Həqiqət və ya hər kəsi sevmək Fakt budur ki, nümunəni Operada açsanız, 3 kvadrat dəstini görəcəksiniz. Kölgəsi olan nişanlar tamamilə yox olur və bu, SVG filtrlərində problemdir. Brauzer tapmasa tələb olunan filtr, o, simvolu sadəcə tətbiq etməmək əvəzinə şəffaf edir.

Bəs niyə tapmır?! Fakt budur ki, burada 2 brauzer dünyası toqquşur. Opera yolumuzun URL-sini("#ürək yolu") yol kimi qəbul edir nisbi fayl Digərləri kimi url("index.html#heart-path") əvəzinə CSS və ya url("main.css#heart-path"). Əgər yolu yalnız url("index.html#heart-path") kimi təyin etsəniz, brauzerlər SVG sənədini index.html daxilində təhlil etmir, çünki onlar onu xarici mənbə hesab edirlər. Main.css-i index.html faylı ilə kataloqdan kənara çıxaran kimi Mozilla-da da eyni problemlər yaranır. IE bu məsələdə WebKit ilə razılaşır. Və WebKit, öz növbəsində, çox dost deyil xarici mənbələr. Onlara daxili bir ehtiyac var.

Biz dünyaları künclərə ayırırıq. Yəni, biz barışırıq. Yəni onları dairəvi şəkildə rəqs etməyə məcbur edirik.
Bəli, biz cross-brauzer uyğunluğu haqqında danışacağıq.

Beləliklə, bizə lazımdır:

iki CSS faylı iki fərqli dünya üçün fərqli yollarla.

Simge üslublarını bir yerdə (fayl) redaktə edin və qoruyun.

Simge və filtr formalarının elanı üçün bir mənbəyə sahib olun - bir SVG sənədi.

Sonradan inkişaf edərkən bu barədə düşünməyin.

Başlayaq. Preprocessors bizə bu problemləri həll etməyə kömək edəcək. CSS preprosessoru olaraq bu misalda Mən rusdilli tərtibatçı cəmiyyətinin diqqətindən haqsız olaraq məhrum olan Stylus-dan istifadə edəcəyəm, lakin bu nümunəni mümkün qədər sadə və aydın şəkildə təsvir edəcəyəm.
IN HTML keyfiyyəti preprocessor Mən PHP-dən istifadə edəcəyəm, ən məşhur preprosessor və server dili eyni vaxtda. Heç bir preprosessordan istifadə etmiş hər hansı bir tərtibatçı bu nümunəni sevimli aləti üçün asanlıqla yaza bilər. Əsas prinsip.

index.html faylının adını index.php olaraq dəyişək. Bundan sonra, biz /css qovluğu yaradacağıq və ora icons.svg faylını yerləşdirəcəyik, burada böyük SVG sənədimizi ikon formalarının bəyannamələri ilə köçürəcəyik.

index.php-də böyük SVG sənədinin yerinə biz PHP ifadəsini yazacağıq

ifadənin özünün baş verdiyi yerdə icons.svg faylının mətnini ehtiva edir.
3-cü bənd tamamlandı, onun üstündən xətt çəkə bilərsiniz.

İndi 1 və 2-ci bəndlər.

/css qovluğunda icons.styl faylı yaradın. Bu, ikonalarımızın üslublarını redaktə edəcəyimiz bir yer olacaq. Gəlin main.css faylının bütün məzmununu ora köçürək və onu mixin icons_mixin kimi format edək:
icons_mixin(yol = "") .heart-icon rect( clip-path:url(path + "#heart-path"); ) .play-icon rect( clip-path:url(path + "#play-path") ); .icon( en:32px; hündürlük:32px; kursor:göstərici; doldurun: #ccc; g( filter:url(yol + "#inset-shadow") ) &:hover(doldurun: #999; ) & : aktiv, &.checked( doldurun:qırmızı; ) )
Miksin parametr kimi SVG formalarına gedən yolu götürür. Biz onu müxtəlif brauzerlər üçün yollar yaradan zaman istifadə edəcəyik.
Nişanların CSS üslubları heç dəyişməyib, mən sadəcə nümunənin rahatlığı və aydınlığı üçün yuva əlavə etdim.

İndi daha 2 .style faylı yaradaq. webkit_ie.styl və ff_op.styl.
Birincisini veb saytımızda standart olaraq istifadə edəcəyik, ikincisini yalnız Mozilla və Opera üçün.

webkit_ie.styl faylına əlavə edin:
@import "icons.style" icons_mixin()
Biz ikona mixin olan faylı idxal edirik və onu parametrlərsiz icra edirik.
ff_op.styl faylına əlavə edin:
@import "icons.style" icons_mixin("icons.svg")
Biz faylı icon mixin ilə idxal edirik və ona icons.svg yolunu ötürürük.

1 və 2-ci bəndlər tamamlandı. Biz bunun üstündən xətt çəkirik.

Əgər çaşqınsınızsa, layihə belə görünür:

index.php-də ikon üslublarına gedən yolu düzəldəcəyik, indi bu

Və ən sonunda, bağlanma etiketindən əvvəl, WebKit və ya Trident (IE) xaricində bir mühərriki olan brauzerlər üçün şərti olaraq simvol üslubları əlavə etmək üçün bir skript əlavə edəcəyik:

var firefox = navigator.userAgent.indexOf("Firefox") != -1 ; var opera = navigator.userAgent.indexOf("Opera") != -1 ; if (firefox || opera) ( document.write(""); )
bu qədər. mənbələr

Biz nə etmişik!? Gəlin geriyə baxaq və nə etdiyimizi görək. İlk baxışdan sistemin çox mürəkkəb görünməsinə baxmayaraq, mənə elə gəlir ki, o, yaşamaq hüququna sahib olmaq üçün kifayət qədər çevik və sadə (ikinci baxışımda) olub.

• CSS istifadə edərək tamamilə idarə olunur.
• O, işləyə bilər
• • IE 9-10
  • Mozilla 4+
  • Opera 11.6+
  • Safari 5.1+
  • Chrome 14+ (4+ hesab edirəm, lakin mən yalnız bu versiyanı yoxladım)
• Çəkisi baxımından olduqca yüngüldür. (Oynatma simvolunu xatırlayın; onun çəkisi cəmi 85 baytdır)
• Bütün nişanlar bir fayldadır, ona görə də serveri sorğularla narahat etməyəcəyik.

Bütün tapşırıqlar yerinə yetirildi. İcazənizlə mən burada dayanacağam. Diqqətinizə və vaxtınıza görə hamınıza çox sağ olun, ümid edirəm faydalı keçirdiniz.

Teqlər: Teqlər əlavə edin

SVG edir yeni standartüçün vektor şəkilləri brauzerdə. Vektor redaktorları, kimi Adobe Illustrator, faylı birbaşa burada saxlamağa imkan verir bu format, və müasir brauzerlər SVG-nin düzgün göstərilməsi ilə bağlı heç bir problem yoxdur. Çünki SVG qrafikası işarələmədən ibarətdir, HTML üçün istifadə etdiyiniz sevimli mətn redaktorunuzda yaradıla və dəyişdirilə bilər. Hətta CSS-dən istifadə edərək SVG-nin üslubunu yaratmaq mümkündür, lakin burada bir neçə incəlik var.

HTML və CSS arasındakı bölgü xətti olduqca düzdür. HTML məzmun və struktura cavabdehdir və CSS layihələrin görünüşünə diqqət yetirir. SVG-də bu xətt bulanıqdır. Bu əsas səbəb niyə SVG-də mətn və formalar adətən CSS deyil, element atributları ilə idarə olunur:

Bu nümunədə biz doldurma ilə doldurulmuş bir düzbucaqlı çəkdik. Rəng və davamlılıq xarici çərçivə Düzbucaqlı strok və vuruş eni atributları ilə müəyyən edilir, lakin düzbucaqlı CSS-dən istifadə etməklə eyni şəkildə tərtib edilə bilər:

Ancaq bu, bütün atributlar üçün işləmir. Bu şəkildə en və hündürlük üçün mövqeləri və dəyərləri müəyyən edə bilməyəcəksiniz. Biz sadəcə olaraq y , width və height atributlarına sadiq qalacağıq.

HTML-də olduğu kimi, biz istənilən elementdə siniflər və identifikatorlarla işləyə bilərik. Ona görə də soruşacaqdıq görünüşüslublu sinifdən istifadə edərək SVG-də çoxlu elementlər.

.nümunə ( doldurun: qırmızı; xətt: yaşıl; vuruşun eni: 2; )

Pseudo-Classlardan istifadə

SVG-də hətta CSS3 keçid xüsusiyyəti ilə birlikdə belə: hover kimi psevdo-siniflərdən istifadə etmək mümkündür.

.nümunə ( doldurun: qırmızı; xətt: yaşıl; vuruşun eni: 2; keçid: hamısı 2s asan; ) .beispiel:hover ( doldurun: mavi; )

Bu nümunəni həyata keçirməklə, nümunə sinfini daşıyan hover elementləri rəngin qırmızıdan maviyə dəyişməsinə səbəb olacaq. Bunun düzgün işləməsi üçün SVG-nin Şəkil kimi daxil edilmədiyinə əmin olun. Yerləşdirmə və ya Iframe seçin:

Img-dən istifadə SVG-nin düzgün göstərilməsinə kömək edəcək. Lakin hover effektləri və keçidlər nəzərə alınmayacaq. Keçiddən əlavə, biz transformasiyadan istifadə edə bilərik, beləliklə, elementlərin miqyasına və ya fırlanmasına imkan veririk.

.misal:hover ( doldurmaq: mavi; çevirmək: döndərmək(20deq); )

CSS3 istifadə edərkən, saxlamaq üçün satıcı prefikslərini əlavə etməyi unutmayın maksimum miqdar müasir brauzerlər. Chrome və Firefox-un qüsursuz şəkildə göstərilməsi problemi olmasa da, Internet Explorerən çox belə yaradıcılığını göstərməkdən imtina edəcək son versiya, halbuki o, bunları göstərməyə kifayət qədər qadirdir CSS xüsusiyyətləri 3 HTML-də istifadə edildikdə.

Media sorğuları və SVG

Əgər siz SVG-ni ölçüləri dəyişdirə bilməsi üçün fərdiləşdirmək istəyirsinizsə, onda sadəcə olaraq media sorğularından istifadə edin:

@media yalnız ekran və (maksimum eni: 800px) ( .misal ( ekran: heç biri; ) )

Bu nümunə, görünən genişlik 800 pikseldən aşağı düşən kimi sinif nümunəsinin elementlərinin göstərilməyəcəyini təmin edir. Nəzərə alın ki, bunu müəyyən edən sənədin eni deyil, SVG-ni daşıyan elementin enidir.

Bu nümunədə nümunə sinfinin elementləri göstərilməyəcək, çünki göstərilən genişlik yalnız 500 pikseldir. SVG-də media sorğuları çap üçün qrafikləri optimallaşdırmaq üçün də faydalıdır.

Bu gün SVG animasiyasını yaratmağın birdən çox yolu var. Bu, birbaşa SVG koduna daxil edilən etiketdən istifadə etməklə edilə bilər. Snap.svg və ya SVG.js kimi xüsusi kitabxanalar var.

Bir az fərqli yanaşmaya baxacağıq: daxili SVG (SVG kodu birbaşa HTML-də) və animasiyadan istifadə fərdi hissələr birbaşa CSS vasitəsilə.

Mən bu yaxınlarda mənim alma mater Wufoo üçün bir layihədə bu metodu sınaqdan keçirdim, burada əhatə edəcəyimiz mövzuda bir az təkmilləşdirmə kimi.

Mən son layihələrimdə SVG-dən çox istifadə etməmişəm, ona görə də düşünürəm ki, bu məqalə ona daha çox diqqət yetirmək üçün əla fürsətdir.

Son animasiya görünüşü çox sadədir. Göründüyü kimi:

CodePen-də baxın

Bunun necə edildiyinə baxaq.

1. İstifadə edəcəyimiz elementlərin siyahısını tərtib edin

Görünə bilər ki, burada bayquşun necə çəkiləcəyi ilə bağlı çox iş var, amma bu məqalə animasiya haqqındadır, ona görə də qrafika ilə mümkün qədər tez məşğul olaq.

Planım onların klassik loqotipindən, rənglərindən və istifadə edərək super sadə Wufoo reklamı etmək idi korporativ üslub. Və sonra bir az yaradıcılıq əlavə edin:

Hərflərin səhifədən çıxması effekti yaradın. Wufoo əyləncəli sözdür, hərflər də əyləncəli olsun;

Bir gün əvvəl biz ön tərəfində dinozavr olan və “Sürətli” olan köynək hazırladıq. Ağıllı. Qroznı." Bunlar həm dinozavrların, həm də Wufoo-nun paylaşdığı xüsusiyyətlərdir. “FORMidble” (möhtəşəm) sözü üzərində oynadığımızı demirəm. Ona görə də bu sözlərin animasiya blokunda görünüb yox olmasını istədim;

Bu sözləri dinozavrla əlaqələndirmək üçün T-Reksin başı görünəcək və sonra tez yox olacaq. Bu, elementlər üçün başqa bir maraqlı keçid olacaq "Sürətli" sözünü göstərəcək.

Bütün bu elementləri Illustrator-a yüklədim:

Loqo və şüar mətnlərinin necə təsvir olunduğuna diqqət yetirin. Bu o deməkdir ki, onlar sadəcə vektor formalarıdır və effektlər həm SVG-də, həm də onlara asanlıqla tətbiq oluna bilər

Gördüyünüz mətn “Sürətli. ” mətn formatında Illustrator-da qalır.

Mən faylı Illustrator-da saxladığım zaman hərf element olaraq qalacaq.

2. SVG formatında yadda saxlayın

Illustrator SVG kimi saxlamağı dəstəkləyir:

Siz bu SVG faylını kod redaktorunda aça və içindəki SVG koduna baxa bilərsiniz:

3. SVG-ni təmizləyin və formalar üçün siniflər təyin edin

Siz kodu optimallaşdırmaq və təmizləmək üçün SVGO vasitəsilə işlədə bilərsiniz lazımsız elementlər DOCTYPE və s. yazın.

Amma indi bizim üçün daha vacib olan formalara fərqli sinif adları verməkdir ki, biz onları CSS-də seçə bilək və müxtəlif işlər görə bilək!

4. SVG daxil edin

Siz bu SVG kodunu kopyalaya və blokun görünməsini istədiyiniz yerə birbaşa HTML-yə yapışdıra bilərsiniz. Amma bu sadəcə primitiv bir şablondur.

Bu kimi bir şey edə bilərsiniz:

...

5. Animasiya!

İndi bütün bu formalar DOM-a daxil edilir və biz onları hər hansı digər kimi yerləşdirə və üslublar təyin edə bilərik HTML elementi. Gəlin bunu edək.

Deyək ki, biz 10 saniyəlik qrafikdən istifadə etmək istəyirik:

İlk sözlər düşür və yox olur

Etmək istədiyimiz ilk şey “Tez. Ağıllı. Qroznı. » Hər söz bir saniyə göstəriləcək.

Hər sözün göstərilməsi üçün vaxtın 10%-ni aldığı animasiyanı belə yaradırıq:

@keyframes gizlədir ( 0% ( qeyri-şəffaflıq: 1; ) 10% ( qeyri-şəffaflıq: 1; ) 15% ( qeyri-şəffaflıq: 0; ) 100% ( şəffaflıq: 0; ) )

Sonra ilk sözü və bütün animasiyanın müddətini 10 saniyəyə təyin edirik (bunun 10%-i 1 saniyədir):

Mətn-1 (animasiya: 10s asanlığı sonsuzluğu gizlədir; )

Növbəti iki söz əvvəlcə gizlənəcək (şəffaflıq: 0; ) və sonra biz eyni animasiyadan istifadə edəcəyik, yalnız vaxt gecikməsi ilə, belə ki, növbəti sözlər bir az sonra görünəcək:

Mətn-2 (şəffaflıq: 0; animasiya: gizlətmə 10s 1.5s asanlıq sonsuz; ) .text-3 (şəffaflıq: 0; animasiya: gizlətmə 10s 3s asanlıq sonsuz; )

Hər növbəti sözün çıxışı arasındakı intervalı təyin etmək üçün əlavə 0,5 saniyə lazımdır.

Atlayan hərflər

Bu element üçün animasiya qurduqdan sonra Wufoo sözündəki hərflər üçün effektlərə keçirik ki, bu da bu şəkildə yan tərəfə keçməlidir:

Burada hiylə odur ki, biz yaradırıq animasiya effekti, bu yalnız 5 saniyə davam edir, lakin biz onu bir dəfə irəli, sonra isə əks istiqamətdə qaçırıq.

Beləliklə, o, bizim 10 saniyəlik qrafikimizə uyğun olacaq və zaman çizelgesinin ortasında yerləşəcək. Etməli olduğumuz şey animasiya effektini bir istiqamətə sürüşdürmək üçün parametrləri təyin etməkdir, çünki nə vaxt tərs sürüşdürün sadəcə olaraq ilkin vəziyyətinə qayıdacaq.

Hər bir hərf üçün effektlərin bir qədər gecikməsi var, buna görə də hamısı eyni vaxtda deyil, bir-birinin ardınca hərəkət edir:

Wufoo-məktub ( animasiya: kaboom 5s asanlıq alternativ sonsuz; &:nth-child(2) ( animasiya gecikməsi: 0.1s; ) &:nth-child(3) ( animasiya gecikməsi: 0.2s; ) &:nth- child(4) ( animasiya gecikməsi: 0,3s; ) &:nth-child(5) ( animasiya gecikməsi: 0,4s; ) ) @keyframes kaboom ( 90% ( transform: miqyas(1,0); ) 100% ( transform : miqyas (1.1);

Yuxarıdakı SCSS kodu qısa bir versiyadır, prefiksləri ehtiva etmir (buna praktikada ehtiyacınız olacaq).

Düşünürəm ki, animasiya gecikməsi orijinal CSS-dən götürmək üçün faydalı ola biləcək bir xüsusiyyətdir. Hərflər bir az gecikmə ilə hərəkət etdikdə daha səliqəli görünərdi.

Və nəhayət, dinozavr

Bu yazılar blok boyunca yanıb-sönəndən sonra aşağıdan dinozavrın başı çıxır. Baxmayaraq ki, dinozavr fiqurundan ibarətdir böyük miqdar bütün bu elementləri ehtiva edən yerləşdirmə etiketindən (qrup) istifadə edərək onların hamısını bir yerdə yerləşdirə bilərik.

Animasiyanı yerləşdirmək üçün çevrilmələrdən istifadə etmək daha səmərəli olduğundan, biz bunu açar kadrlardan istifadə edərək edəcəyik:

@keyframes popup ( 0% ( transform: translateY(150px); ) 34% ( transform: translateY(20px); ) 37% ( transform: translateY(150px); ) 100% ( transform: translateY(150px); ) )

Biz bu animasiyanın təxminən 3 saniyə ərzində "son"da göstərilməsini istəyirik. Bu dövr əslində bütün 10 saniyə ərzində işləyir, lakin siz son 3 saniyə ərzində faktiki görünən effektləri görəcəksiniz.

TranslateY(150px) effekti tətbiq edildikdə, dinozavr qutudan kənarda o qədər aşağı hərəkət edir ki, siz onu görə bilməzsiniz.

Lakin bu animasiya vaxtının 37%-də (təxminən 3 saniyə) siz onun yavaş-yavaş yuxarı qalxdığını, sonra isə sürətlə aşağıya doğru hərəkət etdiyini görürsünüz.

Bu animasiyanı tətbiq etdikdə əmin olacağıq ki:

• Dinozavr əvvəlcə gizlənir;
• Bu animasiya fraqmentinin çıxışı vaxtında gecikir, ona görə də loqo sözündəki hərflər öz rəqslərini bitirdikdən dərhal sonra başlayır (yan tərəfə keçib öz yerinə qayıtdılar).

Trex (çevir: translateY(150px); animasiya: pop-up 10s 6.5s rahatlıq sonsuz; )

Dinozavr son saniyədə yerə yıxılır ki, dərhal sonra blokda yenidən “Sürətli” sözü görünəcək (animasiya oxutma intervalı sonsuz olaraq təyin olunub ki, o, təkrar-təkrar bir dairədə hərəkət etsin). Bu, bəzi əyləncəli sinerji əlavə edir.

6. Blokun kliklənən/interaktiv reklama çevrilməsi

biri faydalı xüsusiyyətlər SVG keyfiyyətini itirmədən obyektləri istənilən ölçüdə miqyaslandırmaq qabiliyyətidir.

Şəkillərin orijinal keyfiyyətini qoruyaraq daxili SVG qutusu yaratmaq üçün biz ol' padded qutu texnikasından istifadə edə bilərik.

... .wufoo-ad-wrap ( hündürlük: 0; padding-top: 100%; mövqe: nisbi; ) .wufoo-ad ( mövqe: mütləq; yuxarı: 0; sol: 0; en: 100%; hündürlük: 100% )

İdeya ondan ibarətdir ki, "sarğı" həmişə genişliyinə görə kvadrat şəklini alacaq. Sonra soruşuruq mütləq dəyərlərÖlçüləri eninə görə tənzimlənən bu mükəmməl kvadratın içərisində SVG mövqeləri.

Bu reklam olduğundan (təbii ki, tıklanabilir olmalıdır) əvəzinə ehtiva edən konteyner kimi istifadə edə bilərsiniz. , sadəcə onu ekran kimi təyin etdiyinizə əmin olun: blok; .