SVG chiziqli gradient

SVG gradientlar

Gradient — bir rangdan boshqa rangga silliq o‘tish. Bundan tashqari, bitta elementga bir nechta rang o‘tishlarini qo‘llash mumkin.

SVG’da gradientlarning ikki turi mavjud:

• Chiziqli gradientlar — <linearGradient> bilan belgilanadi
• Radial gradientlar — <radialGradient> bilan belgilanadi

Gradient ta’riflari <defs> yoki <svg> elementi ichiga joylashtiriladi. <defs> elementi "definitions" (ta’riflar) so‘zining qisqartmasi bo‘lib, maxsus elementlar (masalan, gradientlar) ta’riflarini o‘z ichiga oladi.

Har bir gradientda uni aniqlaydigan id atributi bo‘lishi shart. So‘ngra grafika/rasm qaysi gradientdan foydalanishini shu identifikator orqali ko‘rsatadi.

SVG chiziqli gradient - <linearGradient>

<linearGradient> elementi chiziqli gradientni (bir rangdan boshqa rangga, bir yo‘nalishdan boshqa yo‘nalishga chiziqli o‘tishni) belgilash uchun ishlatiladi.

<linearGradient> elementi ko‘pincha <defs> elementi ichiga joylashtiriladi.

Chiziqli gradientlar gorizontal, vertikal yoki burchakli gradient sifatida belgilanishi mumkin:

• Gorizontal chiziqli gradientlar (bu standart holat) chapdan o‘ngga yo‘naladi (bunda x1 va x2 farq qiladi, y1 va y2 esa teng bo‘ladi)
• Vertikal chiziqli gradientlar yuqoridan pastga yo‘naladi (bunda x1 va x2 teng, y1 va y2 esa farq qiladi)
• Burchakli chiziqli gradientlar x1 va x2 farq qilganda hamda y1 va y2 farq qilganda hosil bo‘ladi

Gorizontal chiziqli gradient

Sariqdan qizilga o‘tuvchi gorizontal chiziqli gradientli ellips:

SVG kodi quyidagicha:

Kod izohi:

• <linearGradient> elementining id atributi gradient uchun yagona nom belgilaydi
• <linearGradient> elementining x1, x2, y1,y2 atributlari gradientning x va y bo‘yicha boshlang‘ich va oxirgi nuqtalarini belgilaydi
• Gradient ranglari ikki yoki undan ortiq <stop> elementi bilan belgilanadi
• <stop>’dagi stop-color atributi gradient to‘xtash nuqtasining rangini belgilaydi
• <stop>’dagi offset atributi gradient to‘xtash nuqtasi qayerda joylashishini belgilaydi
• <ellipse> elementining fill atributi elementni "grad1" gradientiga bog‘laydi

Gorizontal chiziqli gradient

Sariqdan yashilga, so‘ng qizilga o‘tuvchi gorizontal chiziqli gradientli ellips:

SVG kodi quyidagicha:

Vertikal chiziqli gradient

Sariqdan qizilga o‘tuvchi vertikal chiziqli gradientli ellips:

SVG kodi quyidagicha:

Matnli gorizontal chiziqli gradient

Sariqdan qizilga o‘tuvchi gorizontal chiziqli gradientli ellips va ellips ichiga qo‘shilgan matn:

SVG kodi quyidagicha:

Kod izohi:

• <text> elementi matn qo‘shish uchun ishlatiladi

Burchakli chiziqli gradient

Sariqdan qizilga o‘tuvchi burchakli chiziqli gradientli ellips:

SVG kodi quyidagicha:

SVG <linearGradient> atributlari