SVG misollari

O‘zingiz sinab ko‘radigan misollar

Quyidagi misollarda SVG kodi to‘g‘ridan-to‘g‘ri HTML kodiga joylashtirilgan.

SVG barcha asosiy brauzerlarda qo‘llab-quvvatlanadi.

SVG to‘rtburchak

Oltita asosiy atribut va to‘ldirish rangiga ega to‘rtburchak To‘ldirilgan va konturli to‘rtburchak Yarim shaffof to‘rtburchak Yarim shaffof to‘rtburchak 2 Burchaklari yumaloqlangan to‘rtburchak

SVG aylana

Aylana Chegarali aylana Yarim shaffof aylana

SVG ellips

Ellips Bir-birining ustida joylashgan uchta ellips Ikkita ellips

SVG chiziq

Chiziq Qalin gorizontal chiziq Qalin vertikal chiziq

SVG ko‘pburchak

Uch tomonli ko‘pburchak To‘rt tomonli ko‘pburchak Olti tomonli ko‘pburchak Yulduz Yana bir yulduz

Misollar izohi

SVG siniq chiziq

Siniq chiziq Yana bir siniq chiziq

SVG path (yo‘l)

Yo‘l (path) Kvadratik Bezier egri chizig‘i

SVG matn

SVG yordamida oddiy matn yozish To‘ldirilmagan matn To‘ldirilgan va konturli matn rotate atributi yordamida matnning har bir harfini aylantirish transform atributi yordamida butun matnni aylantirish <tspan> elementini <text> elementi ichida ishlatish

SVG textPath

<textPath> elementi yordamida yo‘l bo‘ylab matn <textPath> elementi va textLength atributi yordamida yo‘l bo‘ylab matn

Misollar izohi

SVG havolalar

Havola sifatidagi matn Havola sifatidagi grafika

SVG rasmlar

Rasm joylashtirish Rasmni aylana ustida ko‘rsatish va rasm ostiga matn qo‘shish

SVG markerlar

Boshlang‘ich va oxirgi markerli chiziq Boshlang‘ich, o‘rta va oxirgi markerli siniq chiziq

SVG to‘ldirish

Grafikaning to‘ldirish rangini o‘rnatish uchun fill atributidan foydalanish To‘ldirish rangining shaffofligini o‘rnatish uchun fill-opacity atributidan foydalanish Ko‘pburchak uchun fill-rule atributidan "evenodd" qiymati bilan foydalanish Ko‘pburchak uchun fill-rule atributidan "nonzero" qiymati bilan foydalanish

SVG kontur (stroke)

Grafikaning kontur rangini o‘rnatish uchun stroke atributidan foydalanish Chiziqlar ranglarini o‘rnatish uchun stroke atributidan foydalanish Kontur qalinligini o‘rnatish uchun stroke-width atributidan foydalanish Chiziqlar qalinligini o‘rnatish uchun stroke-width atributidan foydalanish Kontur shaffofligini o‘rnatish uchun stroke-opacity atributidan foydalanish Chiziqlar shaffofligini o‘rnatish uchun stroke-opacity atributidan foydalanish Chiziqlar uchun turli uchlarni o‘rnatish maqsadida stroke-linecap atributidan foydalanish Punktir chiziqlar yaratish uchun stroke-dasharray atributidan foydalanish Punktir konturlar yaratish uchun stroke-dasharray atributidan foydalanish Turli burchak shakllarini yaratish uchun stroke-linejoin atributidan foydalanish

SVG filtrlar bilan tanishuv

SVG grafikasini xiralashtirish uchun <feGaussianBlur> filtridan foydalanish

SVG filtrlari: xiralashtirish effekti

Xiralashtirish effektini yaratish uchun <feGaussianBlur> filtridan foydalanish Xiralashtirish miqdorini o‘rnatish uchun stdDeviation atributidan foydalanish

SVG filtrlari: tushuvchi soya 1

Tushuvchi soya effektini yaratish uchun <feDropShadow> filtridan foydalanish

SVG filtrlari: tushuvchi soya 2

To‘rtburchakni siljitish, so‘ng asl nusxani siljitilgan rasm ustiga aralashtirish Siljitilgan rasmni xiralashtirish Soyani qora qilish Soyani rang matritsasi sifatida qayta ishlash feBlend filtri Filtr 1 Filtr 2 Filtr 3 Filtr 4 Filtr 5 Filtr 6

SVG chiziqli gradientlar

Ikki rangli gorizontal chiziqli gradient Uch rangli gorizontal chiziqli gradient Ikki rangli vertikal chiziqli gradient Matnli gorizontal chiziqli gradient Ikki rangli burchakli chiziqli gradient

SVG radial gradientlar

Ikki rangli radial gradient Uch rangli radial gradient cx va cy 25% bo‘lgan radial gradient spreadMethod="reflect" bo‘lgan radial gradient spreadMethod="repeat" bo‘lgan radial gradient Ikki rangli va stop-opacity qo‘llangan radial gradient

SVG naqshlar (pattern)

Kichik aylanalar bilan to‘ldirilgan to‘rtburchak yaratish Kichik och ko‘k to‘rtburchaklar va gradientli aylanalar bilan to‘ldirilgan to‘rtburchak yaratish

SVG transformatsiyalar

Translate() funksiyasi: obyektni gorizontal ko‘chirish Translate() funksiyasi: obyektni vertikal ko‘chirish Translate() funksiyasi: obyektni gorizontal va vertikal ko‘chirish Scale() funksiyasi: obyektni masshtablash Scale() funksiyasi: obyektni vertikal masshtablash Scale() funksiyasi: obyektni gorizontal masshtablash Rotate() funksiyasi: obyektni ma’lum gradusga aylantirish SkewX() funksiyasi: obyektni x o‘qi bo‘ylab ma’lum gradusga qiyshaytirish SkewY() funksiyasi: obyektni y o‘qi bo‘ylab ma’lum gradusga qiyshaytirish

Misollar izohi

SVG kesish va niqoblash (clipping va masking)

<clipPath>: elementning bir qismini olib tashlash <mask>: elementga to‘rtburchak niqob qo‘llash <mask>: elementga aylana niqob qo‘llash <mask>: to‘ldirish rangi va shaffoflik <mask>: niqobdagi gradientlar

SVG animatsiya

<set>: atribut qiymatini belgilangan davomiylik uchun o‘rnatadi <animate>: elementning atributini animatsiya qiladi <animate>: freeze bilan <animateTransform>: maqsadli elementdagi transform atributini animatsiya qiladi <animateMotion>: element harakat yo‘li bo‘ylab qanday harakatlanishini belgilaydi

SVG skriptlash

JavaScript yordamida atribut qiymatini o‘zgartirish JavaScript yordamida CSS’ni o‘zgartirish JavaScript yordamida atribut qiymati va CSS’ni o‘zgartirish JavaScript yordamida elementni animatsiya qilish

SVG: turli misollar

5 soniya davomida qayta-qayta so‘nib yo‘qoladigan to‘rtburchak Kattalashib, rangini o‘zgartiradigan to‘rtburchak Rangini o‘zgartiradigan uchta to‘rtburchak Matnni harakat yo‘li bo‘ylab siljitish Matnni harakat yo‘li bo‘ylab siljitish, aylantirish va masshtablash Matnni harakat yo‘li bo‘ylab siljitish, aylantirish va masshtablash + kattalashib, rangini o‘zgartiradigan to‘rtburchak Aylanuvchi ellipslar

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish