SVG radial gradient
SVG radial gradient - <radialGradient>
<radialGradient> elementi radial gradientni (bir rangdan boshqa rangga, bir yo‘nalishdan boshqa yo‘nalishga aylanma o‘tishni) belgilash uchun ishlatiladi.
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.
Radial gradient 1
Qizildan ko‘kka o‘tuvchi radial gradientli ellips:
SVG kodi quyidagicha:
Misol
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
O‘zingiz sinab ko‘ring »
Kod izohi:
<radialGradient>elementiningidatributi gradient uchun yagona nom belgilaydicxvacyatributlari radial gradient oxirgi aylanasining x va y pozitsiyasini belgilaydifxvafyatributlari radial gradient boshlang‘ich aylanasining x va y pozitsiyasini belgilaydiratributi radial gradient oxirgi aylanasining radiusini belgilaydi- Gradient ranglari ikki yoki undan ortiq
<stop>elementi bilan belgilanadi <stop>’dagioffsetatributi gradient to‘xtash nuqtasi qayerda joylashishini belgilaydi<stop>’dagistop-coloratributi gradient to‘xtash nuqtasining rangini belgilaydi<ellipse>elementiningfillatributi elementni "grad1" gradientiga bog‘laydi
Radial gradient 2
Qizildan yashilga, so‘ng ko‘kka o‘tuvchi radial gradientli ellips:
SVG kodi quyidagicha:
Misol
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
O‘zingiz sinab ko‘ring »
Radial gradient 3
Qizildan ko‘kka o‘tuvchi radial gradientli ellips (bu yerda oxirgi aylananing x va y pozitsiyasini 25% qilib belgiladik):
SVG kodi quyidagicha:
Misol
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad3" cx="25%" cy="25%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>
O‘zingiz sinab ko‘ring »
Radial gradient 4 - spreadMethod="reflect"
spreadMethod="reflect" bilan qizildan ko‘kka o‘tuvchi radial gradientli ellips:
SVG kodi quyidagicha:
Misol
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad4" cx="25%" cy="25%" spreadMethod="reflect">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
</svg>
O‘zingiz sinab ko‘ring »
Radial gradient 5 - spreadMethod="repeat"
spreadMethod="repeat" bilan qizildan ko‘kka o‘tuvchi radial gradientli ellips:
SVG kodi quyidagicha:
Misol
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad5" cx="25%" cy="25%" spreadMethod="repeat">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>
O‘zingiz sinab ko‘ring »
Radial gradient 6
Qizildan ko‘kka o‘tuvchi radial gradientli yana bir ellips belgilang:
SVG kodi quyidagicha:
Misol
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad6" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" stop-opacity="0" />
<stop offset="100%" stop-color="blue" stop-opacity="1" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad6)" />
</svg>
O‘zingiz sinab ko‘ring »
Kod izohi:
<stop>’dagistop-opacityatributi gradient to‘xtash nuqtasidagi rangning shaffoflik darajasini belgilaydi
SVG <radialGradient> atributlari
| Atribut | Tavsif |
|---|---|
| id | Majburiy. <radialGradient> elementi uchun yagona id belgilaydi |
| cx | Radial gradient oxirgi aylanasining x pozitsiyasi. Standart qiymat — 50% |
| cy | Radial gradient oxirgi aylanasining y pozitsiyasi. Standart qiymat — 50% |
| fr | Radial gradient boshlang‘ich aylanasining radiusi. Standart qiymat — 0% |
| fx | Radial gradient boshlang‘ich aylanasining x pozitsiyasi. Standart qiymat — 50% |
| fy | Radial gradient boshlang‘ich aylanasining y pozitsiyasi. Standart qiymat — 50% |
| r | Radial gradient oxirgi aylanasining radiusi. Standart qiymat — 50% |
| spreadMethod | Gradientning yoyilish usulini belgilaydi. Mumkin bo‘lgan qiymatlar: "pad", "reflect", "repeat". Standart qiymat — "pad" |
| href | Shablon sifatida ishlatiladigan boshqa <radialGradient> elementiga havolani belgilaydi |
| gradientUnits | cx, cy, r, fx, fy, fr uchun koordinatalar tizimini belgilaydi. Mumkin bo‘lgan qiymatlar: "userSpaceOnUse" va "objectBoundingBox". Standart qiymat — "objectBoundingBox" |
| gradientTransform | Gradient koordinatalar tizimiga qo‘shimcha transformatsiyani belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!