Element circle w SVG

Słownik kwalifikacji AUD.05 - Realizacja projektów graficznych i multimedialnych

Element circle w SVG

Element <circle> służy w SVG do rysowania koła. Jest to obiekt wektorowy, więc jego wygląd opisują atrybuty, a nie siatka pikseli jak w grafice rastrowej.

Najważniejsze atrybuty

  • cx — współrzędna X środka koła,
  • cy — współrzędna Y środka koła,
  • r — promień koła,
  • fill — kolor wypełnienia,
  • stroke — kolor obrysu,
  • stroke-width — grubość obrysu.

Przykład:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="90" fill="#00FF00" />
</svg>

Ten kod tworzy obszar SVG o szerokości i wysokości 200 px. Koło ma środek w punkcie (100, 100), czyli dokładnie w centrum obszaru. Atrybut r="90" oznacza promień 90 px, więc średnica koła wynosi 180 px. Kolor #00FF00 oznacza czystą zieleń w zapisie szesnastkowym RGB.

Typowa pułapka egzaminacyjna

Atrybuty width i height określają rozmiar całego obrazu SVG, a nie rozmiar narysowanego koła. Rozmiar koła wynika z atrybutu r. Jeśli r="90", poprawny opis to: pełne, zielone koło o promieniu 90 px.

Warto zapamiętać

W SVG koło opisuje się przez środek i promień. Kolor wypełnienia ustawia się atrybutem fill, a nie color.