SVG kesish/niqoblash

SVG kesish va niqoblash (clipping va masking)

SVG elementlarini kesish va niqoblash mumkin.

<clipPath> elementi SVG elementini kesish uchun ishlatiladi.

<mask> elementi SVG elementiga niqob (mask) qo‘llash uchun ishlatiladi.

SVG kesish (clipping)

Kesish — elementning bir qismini olib tashlash demakdir.

Kesish uchun <clipPath> elementidan foydalanamiz.

<clipPath> elementi ichidagi har bir yo‘l/element tekshirilib, baholanadi. So‘ngra maqsadli elementning shu hududdan TASHQARIDA joylashgan har bir qismi chizilMAYDI (render qilinmaydi). Boshqacha aytganda: yo‘ldan tashqaridagi hamma narsa yashiriladi, ichidagi hamma narsa esa ko‘rsatiladi!

<clipPath> elementi odatda <defs> bo‘limiga joylashtiriladi.

Keling, bir nechta misolni ko‘rib chiqamiz:

Ushbu misolda markazi (50,50) nuqtada joylashgan, radiusi 50 ga teng qizil aylana yaratamiz:

SVG kodi quyidagicha:

Endi bitta <rect> elementiga ega <clipPath> elementini qo‘shamiz. Bu <rect> elementi aylananing YUQORI YARMINI qoplaydi. <rect> o‘zi chizilMAYDI; buning o‘rniga uning o‘lchami va pozitsiyasi aylananing qaysi piksellari ko‘rsatilishini aniqlash uchun ishlatiladi. To‘rtburchak aylananing faqat yuqori yarmini qoplagani uchun aylananing pastki yarmi yo‘qoladi:

SVG kodi quyidagicha:

SVG niqoblash (masking)

Niqoblash uchun <mask> elementidan foydalanamiz.

<mask> elementi SVG elementiga niqob (mask) qo‘llash uchun ishlatiladi.

Niqobga mask atributi orqali murojaat qilinadi.

Quyida oddiy niqob misoli keltirilgan:

SVG kodi quyidagicha:

Yuqoridagi misolda id="mask1" bilan niqob belgilanadi. <mask> elementi ichida <rect> elementi bor. Aynan shu <rect> elementi niqob shaklini belgilaydi.

Misolda niqobdan foydalanadigan <rect> elementi ham belgilangan. Niqobga mask atributi orqali murojaat qilinadi.

Qizil to‘rtburchakning balandligi 100 piksel bo‘lishi kerak, ammo vertikal bo‘yicha faqat dastlabki 50 piksel ko‘rinadi. Buning sababi — niqob to‘rtburchagining balandligi atigi 50 piksel. To‘rtburchak faqat niqob to‘rtburchagi qoplagan qismlardagina ko‘rinadi.

Oxirgi <rect> elementi shunchaki to‘rtburchakning niqobsiz o‘lchamini ko‘rsatish uchun qo‘yilgan.

Quyida niqob shaklini belgilash uchun <circle> elementidan foydalanadigan yana bir misol keltirilgan:

SVG kodi quyidagicha:

To‘ldirish rangi va shaffoflik

<mask> elementi ichidagi elementlarning to‘ldirish rangi niqobga murojaat qiluvchi element to‘ldirish rangining shaffoflik darajasini belgilaydi.

Yuqoridagi misollarda faqat fill="white" dan foydalandik. Niqobda oq rang ko‘rsatiladigan hudud, qora rang esa niqoblanadigan (yashiriladigan) hudud sifatida qabul qilinadi.

Rang #ffffff (oq) ga qanchalik yaqin bo‘lsa, niqob shunchalik noshaffof bo‘ladi, rang #000000 (qora) ga qanchalik yaqin bo‘lsa, niqob shunchalik shaffof bo‘ladi:

SVG kodi quyidagicha:

Niqoblardagi gradientlar

Ushbu misolda niqob shakli to‘ldirish rangi sifatida gradientdan foydalanadi:

SVG kodi quyidagicha: