SVG konturlash
SVG kontur (stroke) atributlari
stroke atributi element atrofida chiziladigan chiziqning rangini o‘rnatadi.
Bu yerda oltita stroke atributini ko‘rib chiqamiz:
stroke- element atrofidagi chiziqning rangini o‘rnatadistroke-width- element atrofidagi chiziqning qalinligini o‘rnatadistroke-opacity- element atrofidagi chiziqning shaffoflik darajasini o‘rnatadistroke-linecap- chiziq yoki ochiq yo‘l uchlarining shaklini o‘rnatadistroke-dasharray- chiziqni punktir chiziq ko‘rinishida ko‘rsatadistroke-linejoin- ikki chiziq tutashgan burchaklarning shaklini o‘rnatadi
SVG stroke atributi
stroke atributi element konturining rangini belgilaydi.
stroke atributidan quyidagi SVG elementlari bilan foydalanish mumkin: <circle>,
<ellipse>, <line>, <path>,
<polygon>, <polyline>,
<rect>, <text>,
<textPath>, <tref> va
<tspan>.
stroke atributining qiymati rang nomi, rgb qiymati yoki hex qiymat bo‘lishi mumkin.
Bu yerda ko‘pburchak, to‘rtburchak, aylana va matnning kontur rangini o‘rnatish uchun stroke atributidan foydalanamiz:
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" stroke="red" />
<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" />
<text x="420" y="100" fill="red" stroke="blue">I love SVG!</text>
</svg>
O‘zingiz sinab ko‘ring »
Bu yerda uchta chiziqning rangini belgilash uchun stroke atributidan foydalanamiz:
SVG kodi quyidagicha:
Misol
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="green" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
O‘zingiz sinab ko‘ring »
SVG stroke-width atributi
stroke-width atributi kontur (stroke) qalinligini belgilaydi.
stroke-width atributidan quyidagi SVG elementlari bilan foydalanish mumkin: <circle>,
<ellipse>, <line>, <path>,
<polygon>, <polyline>,
<rect>, <text>,
<textPath>, <tref> va
<tspan>.
Bu yerda ko‘pburchak, to‘rtburchak, aylana va matnning kontur qalinligini o‘rnatish uchun stroke-width atributidan foydalanamiz:
SVG kodi quyidagicha:
Misol
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" />
<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" />
<text x="420" y="100" fill="red" stroke="blue" stroke-width="4">I love SVG!</text>
</svg>
O‘zingiz sinab ko‘ring »
Bu yerda uchta chiziqning qalinligini o‘rnatish uchun stroke-width atributidan foydalanamiz:
SVG kodi quyidagicha:
Misol
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
O‘zingiz sinab ko‘ring »
SVG stroke-opacity atributi
stroke-opacity atributi kontur (stroke) shaffoflik darajasini belgilaydi.
stroke-opacity atributidan quyidagi SVG elementlari bilan foydalanish mumkin: <circle>,
<ellipse>, <line>, <path>,
<polygon>, <polyline>,
<rect>, <text>,
<textPath>, <tref> va
<tspan>.
stroke-opacity atributining qiymati 0 dan 1 gacha (yoki 0% dan 100% gacha) bo‘ladi.
Bu yerda ko‘pburchak, to‘rtburchak, aylana va matn konturining shaffoflik darajasini o‘rnatish uchun stroke-opacity atributidan foydalanamiz:
SVG kodi quyidagicha:
Misol
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" stroke-opacity="0.4" />
<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" stroke-opacity="0.4" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" stroke-opacity="0.4" />
<text x="420" y="100" fill="red" stroke="blue" stroke-width="4" stroke-opacity="0.4">I love SVG!</text>
</svg>
O‘zingiz sinab ko‘ring »
Bu yerda uchta chiziqning shaffoflik darajasini o‘rnatish uchun stroke-opacity atributidan foydalanamiz:
SVG kodi quyidagicha:
Misol
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red">
<path stroke-width="2" stroke-opacity="0.4" d="M5 20 l215 0" />
<path stroke-width="4" stroke-opacity="0.4" d="M5 40 l215 0" />
<path stroke-width="6" stroke-opacity="0.4" d="M5 60 l215 0" />
</g>
</svg>
O‘zingiz sinab ko‘ring »
SVG stroke-linecap atributi
stroke-linecap atributi chiziq yoki ochiq yo‘l uchlarining turli ko‘rinishlarini belgilaydi.
stroke-linecap atributidan quyidagi SVG elementlari bilan foydalanish mumkin: <path>, <polyline>,
<line>, <text>,
<textPath>, <tref> va
<tspan>.
stroke-linecap atributining qiymati "butt", "round" yoki "square" bo‘lishi mumkin.
Bu yerda uchta chiziq uchun turli uchlarni o‘rnatish maqsadida stroke-linecap atributidan foydalanamiz:
SVG kodi quyidagicha:
Misol
<svg height="120" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red" stroke-width="16">
<path stroke-linecap="butt" d="M10 20 l215 0" />
<path stroke-linecap="round" d="M10 50 l215 0" />
<path stroke-linecap="square" d="M10 80 l215 0" />
</g>
</svg>
O‘zingiz sinab ko‘ring »
SVG stroke-dasharray atributi
stroke-dasharray atributi punktir chiziqlar yaratish uchun ishlatiladi.
stroke-dasharray atributidan quyidagi SVG elementlari bilan foydalanish mumkin: <circle>,
<ellipse>, <line>, <path>,
<polygon>, <polyline>,
<rect>, <text>,
<textPath>, <tref> va
<tspan>.
stroke-dasharray atributining qiymati "none" yoki shtrixlar va bo‘shliqlar uzunligini belgilaydigan, vergul yoki bo‘sh joy bilan ajratilgan uzunliklar/foizlar ro‘yxati bo‘lishi mumkin.
Bu yerda turli punktir chiziqlar yaratish uchun stroke-dasharray atributidan foydalanamiz:
SVG kodi quyidagicha:
Misol
<svg height="100" width="400" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red" stroke-width="6">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="35,10" d="M5 60 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 80 l215 0" />
</g>
</svg>
O‘zingiz sinab ko‘ring »
Bu yerda ko‘pburchak, to‘rtburchak va aylana uchun turli punktir konturlar yaratish maqsadida stroke-dasharray atributidan foydalanamiz:
SVG kodi quyidagicha:
Misol
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" stroke-dasharray="10,5" />
<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" stroke-dasharray="10,5" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" stroke-dasharray="10,5" />
</svg>
O‘zingiz sinab ko‘ring »
SVG stroke-linejoin atributi
stroke-linejoin atributi ikki chiziq tutashgan burchaklarning shaklini belgilaydi.
stroke-linejoin atributidan quyidagi SVG elementlari bilan foydalanish mumkin: <path>,
<polygon>, <polyline>,
<rect>, <text>,
<textPath>, <tref> va
<tspan>.
stroke-linejoin atributining qiymati "arcs", "bevel", "miter", "miter-clip" yoki "round" bo‘lishi mumkin.
Bu yerda turli burchak shakllarini yaratish uchun stroke-linejoin atributidan foydalanamiz:
SVG kodi quyidagicha:
Misol
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,25 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="round" />
<rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="round" />
</svg>
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,25 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="miter" />
<rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="miter" />
</svg>
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,25 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="bevel" />
<rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="bevel" />
</svg>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!