SVG naqshlar (pattern)
SVG naqshlar (pattern) - <pattern>
<pattern> elementi biror maydonni qoplash uchun x va y koordinatalari bo‘yicha muntazam oraliqlarda qayta chiziladigan grafika yaratish uchun ishlatiladi.
Barcha SVG naqshlari <defs> elementi ichida belgilanadi. <defs> elementi "definitions" (ta’riflar) so‘zining qisqartmasi bo‘lib, maxsus elementlar (masalan, naqshlar) ta’riflarini o‘z ichiga oladi.
<pattern> elementida naqshni aniqlaydigan majburiy id atributi bor. So‘ngra grafika/rasm qaysi naqshdan foydalanishini shu identifikator orqali ko‘rsatadi.
Keyin <pattern> elementi ichiga to‘ldirish naqshi sifatida ishlatiladigan bitta yoki bir nechta elementni joylashtiramiz.
Oddiy naqsh misoli
Quyidagi misolda kichik aylanalar bilan to‘ldirilgan to‘rtburchak yaratiladi:
SVG kodi quyidagicha:
Misol
<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="patt1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="red" />
</pattern>
</defs>
<rect width="200" height="100" x="0" y="0" stroke="black" fill="url(#patt1)" />
</svg>
O‘zingiz sinab ko‘ring »
Kod izohi:
<pattern>elementiningidatributi naqsh uchun yagona nom belgilaydi<pattern>elementiningxvayatributlari naqsh shakl ichida qanchalik uzoqdan boshlanishini belgilaydi<pattern>elementiningwidthvaheightatributlari naqshning kengligi va balandligini belgilaydi<pattern>elementi ichidagi<circle>elementi to‘ldirish naqshining shaklini belgilaydi<rect>elementiningfill="url(#patt1)"atributi "patt1" naqshiga ishora qiladi- To‘rtburchak shu naqsh bilan to‘ldiriladi
Gradientli naqsh
Quyidagi misolda kichik och ko‘k to‘rtburchaklar va gradientli aylanalar bilan to‘ldirilgan to‘rtburchak yaratiladi:
SVG kodi quyidagicha:
Misol
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="red" />
</linearGradient>
<pattern id="patt2" x="0" y="0" width="0.25" height="0.25">
<rect x="0" y="0" width="50" height="50" fill="lightblue" />
<circle cx="25" cy="25" r="20" fill="url(#grad1)" fill-opacity="0.8" />
</pattern>
</defs>
<rect width="200" height="200" x="0" y="0" stroke="black" fill="url(#patt2)" />
</svg>
O‘zingiz sinab ko‘ring »
Kod izohi:
<pattern>elementiningidatributi naqsh uchun yagona nom belgilaydi<pattern>elementiningxvayatributlari naqsh shakl ichida qanchalik uzoqdan boshlanishini belgilaydi<pattern>elementiningwidthvaheightatributlari naqshning kengligi va balandligini belgilaydi. Naqsh gorizontal bo‘yicha 4 marta va vertikal bo‘yicha 4 marta takrorlanishini istaymiz, shuning uchun balandlik va kenglikni 0.25 qilib belgilaymiz (ya’ni naqshning kengligi va balandligi umumiy maydon o‘lchamining 25% ini tashkil qiladi)<pattern>elementi ichidagi<rect>elementi to‘ldirish naqshining bitta shaklini (50x50 o‘lchamli och ko‘k to‘rtburchak) belgilaydi<pattern>elementi ichidagi<circle>elementi to‘ldirish naqshining yana bir shaklini (oqdan qizilga o‘tuvchi gradientli aylana) belgilaydi<circle>elementiningfill="url(#grad1)"atributi "grad1" gradientiga ishora qiladi<rect>elementiningfill="url(#patt2)"atributi "patt2" naqshiga ishora qiladi- To‘rtburchak shu naqsh bilan to‘ldiriladi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!