HTML5: SVG grafika - Kör és ellipszis

3. oldal / 9

27.3. fejezet: Kör és ellipszis

A kör az egyik legegyszerűbb alakzat. Nézzük a következő kódot: 

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Magyarázat:

  • Az <svg> elemben megadjuk a létrehozandó grafika szélességét és magasságát.
  • A circle elemmel jelöljük a kört.
  • A cx és a cy a kör középpontját jelöli, míg az r a sugarát.
  • A stroke paraméterrel megadjuk a körvonal színét.
  • A stroke-width elem szabályozza a körvonal vastagságát.
  • A fill paraméterrel pedig a kör belsejének kitöltő színét adjuk meg.

Így már tetszőleges kört létre tudunk hozni!

Az ellipszis létrehozása kicsit bonyolultabb, mivel itt a rx és ry koordináták nem lesznek egyformák. Nézzük a következő rajzot! 

SVG ellipszis

Ennek forráskódja a következő: (htmlpelda71.html)

<html>
<body>
<h1>SVG ellipszis</h1>
 <svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
</body>
</html>

 A következő példában három ellipszist rakunk egymás fölé:

SVG ellipszisek

És a hozzá tartozó kódrészlet: (htmlpelda72.html)

<html>
<body>
<h1>SVG ellipszisek</h1>
  <svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>
</body>
</html>

A fejezet leghitelesebb forrása: https://www.w3schools.com/graphics/svg_ellipse.asp