SVG transformatsiyalar
SVG transformatsiyalar
SVG elementlarini transform funksiyalari yordamida o‘zgartirish mumkin.
transform atributidan istalgan SVG elementi bilan foydalanish mumkin.
transform atributi elementga va uning farzand elementlariga qo‘llanilishi mumkin bo‘lgan transform funksiyalari ro‘yxatini belgilaydi:
translate()scale()rotate()skewX()skewY()matrix()
Translate() funksiyasi
translate() funksiyasi obyektni x va y qiymatlariga siljitish uchun ishlatiladi.
Faraz qilaylik, bitta obyekt x="5" va y="5" pozitsiyasiga joylashtirilgan. Boshqa obyektda esa transform="translate(50 0)" bor; bu boshqa obyekt x bo‘yicha 55 (5 + 50) va y bo‘yicha 5 (5 + 0) pozitsiyaga joylashtirilishini bildiradi.
Keling, bir nechta misolni ko‘rib chiqamiz:
Ushbu misolda qizil to‘rtburchak (5,5) o‘rniga (55,5) nuqtaga ko‘chiriladi:
SVG kodi quyidagicha:
Misol
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" />
<rect x="5" y="5" width="40" height="40" fill="red" transform="translate(50 0)" />
</svg>
O‘zingiz sinab ko‘ring »
Ushbu misolda qizil to‘rtburchak (5,5) o‘rniga (5,55) nuqtaga ko‘chiriladi:
SVG kodi quyidagicha:
Misol
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" />
<rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" />
</svg>
O‘zingiz sinab ko‘ring »
Ushbu misolda qizil to‘rtburchak (5,5) o‘rniga (55,55) nuqtaga ko‘chiriladi:
SVG kodi quyidagicha:
Misol
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" />
<rect x="5" y="5" width="40" height="40" fill="red" transform="translate(50 50)" />
</svg>
O‘zingiz sinab ko‘ring »
Scale() funksiyasi
scale() funksiyasi obyektni x va y qiymatlari bo‘yicha masshtablash uchun ishlatiladi. Agar y ko‘rsatilmasa, u x’ga teng qilib olinadi.
scale() funksiyasi obyekt o‘lchamini o‘zgartirish uchun ishlatiladi. U ikkita son qabul qiladi: x bo‘yicha masshtab koeffitsiyenti va y bo‘yicha masshtab koeffitsiyenti. x va y masshtab koeffitsiyentlari o‘zgartirilgan o‘lchamning asl o‘lchamga nisbati sifatida olinadi. Masalan, 0.5 obyektni 50% ga kichraytiradi.
Ushbu misolda qizil aylana scale() funksiyasi yordamida ikki baravar kattalashtiriladi:
SVG kodi quyidagicha:
Misol
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" fill="yellow" />
<circle cx="50" cy="25" r="20" fill="red" transform="scale(2)" />
</svg>
O‘zingiz sinab ko‘ring »
Ushbu misolda qizil aylana scale() funksiyasi yordamida vertikal bo‘yicha ikki baravar kattalashtiriladi:
SVG kodi quyidagicha:
Misol
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" fill="yellow" />
<circle cx="70" cy="25" r="20" fill="red" transform="scale(1,2)" />
</svg>
O‘zingiz sinab ko‘ring »
Ushbu misolda qizil aylana scale() funksiyasi yordamida gorizontal bo‘yicha ikki baravar kattalashtiriladi:
SVG kodi quyidagicha:
Misol
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" fill="yellow" />
<circle cx="50" cy="25" r="20" fill="red" transform="scale(2,1)" />
</svg>
O‘zingiz sinab ko‘ring »
Rotate() funksiyasi
rotate() funksiyasi obyektni degree’ga aylantirish uchun ishlatiladi.
Ushbu misolda ko‘k to‘rtburchak 45 gradusga aylantiriladi:
SVG kodi quyidagicha:
Misol
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="5" width="40" height="40" fill="blue" transform="rotate(45)" />
</svg>
O‘zingiz sinab ko‘ring »
SkewX() funksiyasi
skewX() funksiyasi obyektni x o‘qi bo‘ylab degree’ga qiyshaytirish uchun ishlatiladi.
Ushbu misolda ko‘k to‘rtburchak x o‘qi bo‘ylab 30 gradusga qiyshaytiriladi:
SVG kodi quyidagicha:
Misol
<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" transform="skewX(30)" />
</svg>
O‘zingiz sinab ko‘ring »
SkewY() funksiyasi
skewY() funksiyasi obyektni
y o‘qi bo‘ylab degree’ga qiyshaytirish uchun ishlatiladi.
Ushbu misolda ko‘k to‘rtburchak y o‘qi bo‘ylab 30 gradusga qiyshaytiriladi:
SVG kodi quyidagicha:
Misol
<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" transform="skewY(30)" />
</svg>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!