SVG to‘ldirish
SVG to‘ldirish atributlari
fill atributi element ichki qismining rangini o‘rnatadi.
Bu yerda uchta fill atributini ko‘rib chiqamiz:
fill- element ichki qismining rangini o‘rnatadifill-opacity- element ichidagi rangning shaffoflik darajasini o‘rnatadifill-rule- shaklning ichki qismini aniqlashda qo‘llaniladigan algoritmni o‘rnatadi
SVG fill atributi
fill atributi element ichki qismining rangini belgilaydi.
fill atributidan quyidagi SVG elementlari bilan foydalanish mumkin: <circle>,
<ellipse>, <path>,
<polygon>, <polyline>,
<rect>, <text>,
<textPath>, <tref> va
<tspan>.
fill atributining qiymati rang nomi, rgb qiymati yoki hex qiymat bo‘lishi mumkin.
Bu yerda fill atributini ko‘pburchak, to‘rtburchak, aylana va matn uchun ishlatamiz:
SVG kodi quyidagicha:
Misol
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,10 0,190 100,190" fill="lime" />
<rect width="150" height="100" x="120" y="50" fill="blue" />
<circle r="45" cx="350" cy="100" fill="red" />
<text x="420" y="100" fill="red">I love SVG!</text>
</svg>
O‘zingiz sinab ko‘ring »
SVG fill-opacity atributi
fill-opacity atributi to‘ldirish rangining shaffoflik darajasini belgilaydi.
fill-opacity atributidan quyidagi SVG elementlari bilan foydalanish mumkin: <circle>,
<ellipse>, <path>,
<polygon>, <polyline>,
<rect>, <text>,
<textPath>, <tref> va
<tspan>.
fill-opacity atributining qiymati 0 dan 1 gacha (yoki 0% dan 100% gacha) bo‘ladi.
Bu yerda fill-opacity atributini ko‘pburchak, to‘rtburchak, aylana va matn uchun ishlatamiz:
SVG kodi quyidagicha:
Misol
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,10 0,190 100,190" fill="lime" fill-opacity="0.5" />
<rect width="150" height="100" x="120" y="50" fill="blue" fill-opacity="50%" />
<circle r="45" cx="350" cy="100" fill="red" fill-opacity="0.6" />
<text x="420" y="100" fill="red" fill-opacity="70%">I love SVG!</text>
</svg>
O‘zingiz sinab ko‘ring »
SVG fill-rule atributi
fill-rule atributi shaklning ichki qismini aniqlashda qo‘llaniladigan algoritmni belgilaydi.
fill-rule atributidan quyidagi SVG elementlari bilan foydalanish mumkin: <path>,
<polygon>, <polyline>, <text>,
<textPath>, <tref> va
<tspan>.
fill-rule atributining qiymati "nonzero" yoki "evenodd" bo‘lishi mumkin.
Bu yerda fill-rule atributini "evenodd" qiymati bilan ko‘pburchak uchun ishlatamiz:
SVG kodi quyidagicha:
Misol
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="evenodd" />
</svg>
O‘zingiz sinab ko‘ring »
Bu yerda fill-rule atributini "nonzero" qiymati bilan ko‘pburchak uchun ishlatamiz:
SVG kodi quyidagicha:
Misol
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="nonzero" />
</svg>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!