Informatika gyűjtemény

Egy szinttel feljebb 5. óra

2004050607080910

<<  5. óra  >>

<<  Feladatok  >>

NézetNyomtat

5. óra
Címkék > Óra

5. óra

Megismerkedünk a Scalable Vector Graphics (SVG) alapjaival és ábrákat készítünk egy izgalmas egyszemélyes játék elemzéséhez. Az SVG alapjainak leírása Fehér Gábor írása alapján készült.

Helló SVG-világ!

Az SVG egy nyílt vektorgrafikus szabvány, ma már majdnem minden operációs rendszer és böngésző támogatja. A formátum XML alapú, egy SVG-ábra "forráskódja" nagyban hasonlít egy HTML dokumentum forráskódjához.
A fenti ábra SVG forráskódja:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

<circle cx='120' cy='150' r='60' style='fill: gold;'/>
<polyline points='120 30, 25 150, 290 150'  stroke-width='4' stroke='red' style='fill: none;' />
<polygon points='210 100, 210 200, 270 150' style='fill: blue;' /> 
<text x='30' y='280' fill='green' font-size='48'>Helló, SVG-világ!</text>

</svg>
A továbbiakban kicsit részletesebben elmagyarázzuk az SVG kód részeit. Csak azokba a részletekbe megyünk bele, amelyek szükségesek lehetnek az órai feladat megoldásához.

SVG állomány váza

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

   <!-- grafikai elemek -->

</svg>
  • Mivel az SVG állomány egy szabályos XML dokumentum, az első "tag" (DOCTYPE) a dokumentumtípus-deklarációt adja meg. Bővebben: http://svg.elte.hu
  • Az XML dokumentum "gyökere" az <svg> "tag", ebben adjuk meg a használt szabványt és a kép méreteit. Az xmlns attribútum a használt névterek megadására jó.
  • A képet felépítő grafikai elemek megadása az <svg> "tag" belsejében történik.

Grafikai elemek SVG-ben

Téglalap

<rect x="20" y="30" rx="8" ry="8" width="100" height="40"
        style="fill:red;stroke:black;stroke-width:2;"/>

Kör

<circle cx="200" cy="50" r="30" style="fill:red;stroke:black;stroke-width:2;"/>

Vonal

<line x1="20" y1="120" x2="120" y2="200" style="fill:red;stroke:black;stroke-width:2;"/>

Szöveg

<text x="10" y="50" style="fill:red;stroke:black;stroke-width:1;font-size: 40px;">hello, world</text>

Töröttvonal

<polyline points="160 120 240 120 240 200 160 200 160 180 220 180"
       style="fill:red;stroke:black;stroke-width:2;"/>

Feladat

Pataki-probléma