Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

HTML’da SVG

SVG elementlarini to‘g‘ridan-to‘g‘ri HTML sahifalaringizga joylashtirishingiz mumkin.

ULASHISH

SVG’ni to‘g‘ridan-to‘g‘ri HTML sahifalarga joylashtirish

Quyida oddiy SVG grafikasiga misol keltirilgan:

Sorry, your browser does not support inline SVG.

uning HTML kodi esa quyidagicha:

Misol

<!DOCTYPE html> <html> <body> <h1>My first SVG</h1> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>
O‘zingiz sinab ko‘ring »

SVG kodining izohi:

  • <svg> ildiz elementidan boshlang
  • SVG rasmining kengligi va balandligi width va height atributlari bilan belgilanadi
  • SVG XML dialekti bo‘lgani uchun nomlar fazosini (namespace) har doim xmlns atributi yordamida to‘g‘ri bog‘lang
  • "http://www.w3.org/2000/svg" nomlar fazosi HTML hujjati ichidagi SVG elementlarini aniqlaydi
  • <circle> elementi aylana chizish uchun ishlatiladi
  • cx va cy atributlari aylana markazining x va y koordinatalarini belgilaydi. Agar ular ko‘rsatilmasa, aylana markazi (0, 0) ga o‘rnatiladi
  • r atributi aylananing radiusini belgilaydi
  • stroke va stroke-width atributlari shaklning konturi (outline) qanday ko‘rinishini boshqaradi. Biz aylana konturini 4px qalinlikdagi yashil "chegara" qilib belgiladik
  • fill atributi aylananing ichki rangini bildiradi. Biz to‘ldirish rangini sariq qilib belgiladik
  • Yopuvchi </svg> tegi SVG rasmini yopadi

Eslatma: SVG XML’da yozilgani uchun quyidagilarni yodda tuting:

  • Barcha elementlar to‘g‘ri yopilishi shart
  • XML katta-kichik harflarni farqlaydi, shuning uchun barcha SVG elementlari va atributlarini bir xil registrda yozing. Biz kichik harflarni afzal ko‘ramiz
  • SVG’dagi barcha atribut qiymatlarini qo‘shtirnoq ichiga oling (hatto ular son bo‘lsa ham)

Yana bir SVG misoli

Quyida oddiy SVG grafikasiga yana bir misol keltirilgan:

SVG Sorry, your browser does not support inline SVG.

uning HTML kodi esa quyidagicha:

Misol

<!DOCTYPE html> <html> <body> <svg width="150" height="100" xmlns="http://www.w3.org/2000/svg">   <rect width="100%" height="100%" fill="green" />   <circle cx="75" cy="50" r="40" fill="yellow" />   <text x="75" y="60" font-size="30" text-anchor="middle" fill="red">SVG</text> </svg> </body> </html>
O‘zingiz sinab ko‘ring »

SVG kodining izohi:

  • <svg> ildiz elementidan boshlang, kenglik va balandlikni hamda to‘g‘ri nomlar fazosini belgilang
  • <rect> elementi to‘rtburchak chizish uchun ishlatiladi
  • To‘rtburchakning kengligi va balandligi <svg> elementi kengligi/balandligining 100% iga teng qilib belgilanadi
  • To‘rtburchakning to‘ldirish rangini yashil qilib belgilang
  • <circle> elementi aylana chizish uchun ishlatiladi
  • cx va cy atributlari aylana markazining x va y koordinatalarini belgilaydi
  • r atributi aylananing radiusini belgilaydi
  • Biz aylananing to‘ldirish rangini sariq qilib belgiladik
  • <text> elementi matn chizish uchun ishlatiladi
  • x va y atributlari matn markazining x va y koordinatalarini belgilaydi
  • font-size atributi matnning shrift o‘lchamini belgilaydi
  • text-anchor atributi (matnning) o‘rta nuqtasi qayerda bo‘lishini belgilaydi
  • fill atributi matn rangini belgilaydi
  • Ko‘rsatiladigan matn sifatida "SVG" deb yozing
  • SVG rasmini </svg> bilan yoping

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish