Strona główna » Poradniki » Grafika SVG » Figury
 

Figury

Wstęp

W poprzedniej części został przedstawiony generalny koncept tworzenia grafiki SVG oraz jak zakodować linię i nadać jej inny kolor oraz grubość. W tym artykule zostanie przedstawiony sposób wstawiania do obrazka bardziej skomplikowanych obiektów takich jak koło i kwadrat.

Prostokąty

Podstawy

Jednym z podstawowych obiektów jakie można wstawić w SVG to prostokąty. Służy do tego znacznik rect (ang. skrót rectangle). W celu utworzenia obiektu rect należy podać co najmniej jego szerokość width oraz wysokość height. Należy pamiętać, że znacznik rekt należy prawidłowo zamknąć! Najprostszy obrazek, który będzie rysował prostokąt 200 x 100 wygląda następująco:

  1. <svg width="220" height="120">
  2.   <rect width="200" height="100" stroke="black" stroke-width="2" fill="green"/>
  3. </svg>

(2.) W utworzonym obiekcie rect prócz określenia ich szerokości i wysokości został ustalony styl obiektu. W celu ustalenia obramowania obiektu to zasada jest jak w przypadku linii. Kolor obramowania ustala się przy pomocy atrybutu stroke, a szerokość przy pomocy stroke-width. Pojawił się jednak nowy atrybut fill, który odpowiada za określenie koloru wypełnienia obiektu. Wszystkie argumenty stylizujące można określić poprzez CSS.

Ustawianie prostokąta

W przypadku ustawiania pozycji dowolnego obiektu w SVG należy określić argumenty x i y.

  1. <svg width="220" height="120">
  2.   <rect x="10" y="0" width="100" height="100" stroke="black" stroke-width="2" fill="green"/>
  3.   <rect x="110" y="20" width="100" height="100" stroke="black" stroke-width="2" fill="blue"/>
  4. </svg>

Zaokrąglone rogi

Prostokąty w SVG można jeszcze stylizować przy pomocy atrybutów rx oraz ry. Służą one do określania zaokrąglenie rogów. W przypadku, gdy oba atrybuty przyjmują tę samą wartość to wszystkie rogi prostokąta zostaną tak samo zaokrąglone jak na poniższym rysunku:

  1. <svg width="120" height="120">
  2.   <rect x="10" y="10" width="100" height="100" stroke="black" stroke-width="2" fill="green" rx="20" ry="20"/>
  3. </svg>

Jednak w przypadku zmiany wartości jednego z tych atrybutów (lub nawet usunięcia) zaokrąglenie stanie się nieregularne, ponieważ rx określa punkt zaokrąglenie (przesunięcia w poziomie), a ry analogicznie w pionie. Daną zależność można przeanalizować na poniższym rysunku:

  1. <svg width="120" height="120">
  2.   <rect x="10" y="10" width="100" height="100" stroke="black" stroke-width="2" fill="green" rx="10" ry="40"/>
  3. </svg>

Koła i Elipsy

Koło

Do narysowania koła należy użyć znacznika circle. W tym przypadku pozycjonowanie obiektu odbywa się nieco inaczej niż w przypadku prostokąta. Dla koła należy ustalić dwa argumenty cx i cy, które określają środek rysowanego koła. Natomiast sam promień koła ustala się atrybutem r. Przykładowe fioletowe koło o promieniu 50px wygląda następująco:

  1. <svg width="120" height="120">
  2.   <circle cx="60" cy="60" r="50" stroke="black" stroke-width="2" fill="purple" />
  3. </svg>

W przypadku pominięcia atrybutów cx i cy środek koła zostaje domyślnie ustawiony w punkcie (0, 0)! Ustalenie stylu obiektu odbywa się na tych samych zasadach co w przypadku prostokąta lub lini.

Elipsy

Zwykle o kole mówi się po elipsach jako, że koła są specjalnym przypadkiem elipsy, ale w tym przypadku elipsę tworzy się bardzo podobnie do koła. Znacznik z circle zmienia się na ellipse. Pozycjonowanie obiektu odbywa się ponownie poprzez ustawienie środka obiektu poprzez argumenty cx oraz cy. Różnica polega na określeniu promienia krzywizny. W tym przypadku należy cofnąć się do prostokątów z nieregularnie zakrzywionymi rogami, a konkretniej argumentów rx i ry.

Przykładowo elipsa może wyglądać:

  1. <svg height="120" width="220">
  2. <ellipse cx="110" cy="60" rx="100" ry="50" stroke="black" fill="gray" />
  3. </svg>

Zadania

W celu sprawdzenie wiadomości nabytych podczas czytania artykułów postaraj się uzyskać jak najdokładniejsze kopie poniższych rysunków:

W celu sprawdzenia kodu dowolnego rysunku wystarczy zapisać obrazek np. na pulpicie i otworzyć w edytorze tekstu.

Zadanie 1

Zadanie 2

Zadanie 3

Ten obrazek może sprawdzić nieco trudności.