SVG bilan niqoblash
CSS SVG maska qatlamlari
SVG <mask> elementi rasmda mask qo‘llash uchun ishlatilishi mumkin.
Bu yerda rasm uchun turli mask qatlamlari yaratish uchun SVG <mask> elementidan foydalanamiz.
SVG maska qatlami — doira
SVG <circle> elementi doira yaratish uchun ishlatiladi.
Misol
SVG niqob qatlami (aylana shaklida):
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<circle r="150" cx="200" cy="200"
fill="#ffffff" />
</mask>
<image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask1)"></image>
</svg>
O‘zingiz sinab ko‘ring »
SVG maska qatlami — ellips
SVG <ellipse> elementi ellips yaratish uchun ishlatiladi.
Misol
SVG niqob qatlami (ellips shaklida):
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<ellipse cx="220" cy="150"
rx="200" ry="100" fill="#ffffff" />
</mask>
<image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask1)"></image>
</svg>
O‘zingiz sinab ko‘ring »
SVG maska qatlami — uchburchak
SVG <polygon> elementi kamida uch tomondan iborat grafika yaratish uchun ishlatiladi.
Misol
SVG niqob qatlami (uchburchak shaklida):
<svg width="600" height="400"
xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
O‘zingiz sinab ko‘ring »
SVG maska qatlami — yulduz
SVG <polygon> elementi yulduz shaklidagi mask qatlami yaratish uchun ham ishlatilishi mumkin.
Misol
SVG niqob qatlami (yulduz shaklida):
<svg width="600" height="400"
xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
O‘zingiz sinab ko‘ring »
SVG maska qatlami — bir nechta doiralar
Bu yerda turli x va y joylashuvli uchta doira belgilaymiz.
Misol
SVG niqob qatlami (aylanalar shaklida):
<svg width="600" height="400"
xmlns="http://www.w3.org/2000/svg">
<mask
id="svgmask1">
<circle fill="#ffffff" cx="75" cy="75"
r="75"></circle>
<circle fill="#ffffff" cx="80"
cy="260" r="75"></circle>
<circle fill="#ffffff"
cx="270" cy="160" r="75"></circle>
</mask>
<image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask1)"></image>
</svg>
O‘zingiz sinab ko‘ring »
Barcha CSS masking xossalari
Quyidagi jadval barcha CSS masking xossalarini sanab o‘tadi:
| Xususiyat | Tavsif |
|---|---|
| mask-clip | Niqob tasviri qaysi hududga ta’sir qilishini belgilaydi |
| mask-composite | Joriy niqob qatlamida, uning ostidagi niqob qatlamlarida qo‘llaniladigan kompozitsion operatsiyani belgilaydi |
| mask-image | Element uchun niqob qatlami sifatida foydalaniladigan tasvirni belgilaydi |
| mask-mode | Niqob qatlami tasvirining yorqinlik niqobi yoki alfa niqobi sifatida ko‘rib chiqilishini belgilaydi |
| mask-origin | Niqob qatlami rasmining boshlanish joyini (niqob joylashuv sohasini) belgilaydi |
| mask-position | Niqob qatlami rasmining boshlang‘ich joylashuvini o‘rnatadi (niqob joylashuv sohasiga nisbatan) |
| mask-repeat | Niqob qatlami tasviri qanday takrorlanishini belgilaydi |
| mask-size | Niqob qatlami tasvirining hajmini belgilaydi |
| mask-type | SVG <maska> elementi yorqinlik niqobi yoki alfa niqobi sifatida ko‘rib chiqilishini belgilaydi. |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!