SVG <rect>

SVG-muodot

SVG tarjoaa kehittäjille joitakin ennakkosuunniteltuja muotoelementtejä:

• Neliö <rect>
• Ympyrä <circle>
• Eliptinen <ellipse>
• Tasainen viiva <line>
• Vaihe <polyline>
• Monikulmio <polygon>
• Polku <path>

Seuraavat luvut käsittelevät jokaisen elementin alkaen rect-elementistä.

SVG-kuutio - <rect>

Esimerkki 1

<rect> Elementti käytetään suorakulmion ja suorakulmion muotojen luomiseen:

Tämä on SVG-koodi:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Kokeile itse

Koodin selitys:

• <rect>-elementin width ja height -ominaisuudet määrittävät suorakulmion korkeuden ja leveyden
• style-ominaisuus käytetään määrittämään suorakulmion CSS-ominaisuudet
• CSS fill-ominaisuus määrittää suorakulmion täytteen värin
• CSS border-width-ominaisuus määrittää suorakulmion reunan leveyden
• CSS stroke-ominaisuus määrittää suorakulmion reunan värin

Esimerkki 2

Tarkastellaan toista esimerkkiä, joka sisältää uusia ominaisuuksia:

Tämä on SVG-koodi:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

Kokeile itse

Koodin selitys:

• x-ominaisuus määrittää suorakulmion vasemman reunan sijainnin (esim. x="50" asettaa suorakulmion 50 px:llä vasemmalta reunasta)
• y-ominaisuus määrittää suorakulmion yläosan sijainnin (esim. y="20" asettaa suorakulmion 20 px:llä ylä reunasta)
• CSS fill-opacity-ominaisuus määrittää täytteen värin läpinäkyvyyden (sallittu arvoalue: 0-1)
• CSS border-opacity-ominaisuus määrittää reunan värin läpinäkyvyyden (sallittu arvoalue: 0-1)

Esimerkki 3

Määritä koko elementin läpinäkyvyys:

Tämä on SVG-koodi:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

Kokeile itse

Koodin selitys:

• CSS opacity-ominaisuus määrittää koko elementin läpinäkyvyyden arvon (sallittu arvoalue: 0-1)

Esimerkki 4

Viimeinen esimerkki, luo kulmien muodostama suorakulmio:

Tämä on SVG-koodi:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Kokeile itse

Koodin selitys:

• rx ja ry -ominaisuudet tekevät suorakulmion kulmista pyöristettyjä