Lekcja 2. Sześć kształtów, od których wszystko się zaczyna

rect, circle, ellipse, line, polyline, polygon

W poprzedniej lekcji ustawiliśmy płótno. Teraz coś na nim narysujemy — i zaczniemy od najprostszego możliwego pytania: skoro path potrafi narysować absolutnie każdy kształt, po co komu osobne znaczniki na prostokąt i koło?

Odpowiedź jest praktyczna. <circle cx="50" cy="50" r="40"/> czyta i poprawia każdy człowiek. Ten sam okrąg zapisany jako path to dwa łuki i ciąg liczb, którego nie da się przejrzeć wzrokiem. Kształty podstawowe istnieją dla wygody — Twojej, nie przeglądarki.

I załatwiają zaskakująco dużo. Zanim sięgniesz po path, sprawdź, czy nie wystarczy jeden z tej szóstki.

Prostokąt

html

<rect x="15" y="20" width="70" height="45" rx="6"/>

x i y to lewy górny róg, nie środek. To pierwsza rzecz, która myli osoby przyzwyczajone do koła, gdzie współrzędne wskazują właśnie środek.

Atrybut rx zaokrągla narożniki. Gdy dobijesz go do połowy wysokości, prostokąt zamienia się w pigułkę i dalej już nic się nie dzieje — to naturalny sufit, bo zaokrąglenie nie może zjeść więcej niż połowę boku.

Koło i elipsa

html

<circle cx="145" cy="42" r="26"/>
<ellipse cx="245" cy="42" rx="40" ry="24"/>

Tu cx i cy to środek. Elipsa to koło z dwoma promieniami — poziomym i pionowym. Gdy rx równa się ry, dostajesz zwykłe koło, więc <circle> jest w gruncie rzeczy skrótem.

Linia i łamana

html

<line x1="15" y1="120" x2="85" y2="95"/>
<polyline points="115,120 135,95 155,120 175,95"/>

line to odcinek między dwoma punktami. polyline to ciąg odcinków — lista par współrzędnych oddzielonych przecinkami lub spacjami. Przecinek jest tylko dla czytelności; 115 120 135 95 znaczy dokładnie to samo.

Uwaga na pułapkę: oba znaczniki są niewidoczne bez stroke. Domyślne fill jest czarne, a domyślny stroke — żaden. Linia bez obrysu istnieje w kodzie i nie istnieje na ekranie.

Wielokąt

html

<polygon points="215,120 245,95 275,120"/>

To samo co polyline, z jedną różnicą: kształt domyka się sam. Nie musisz powtarzać pierwszego punktu na końcu.

Pobaw się trzema suwakami. Zwróć uwagę, że rx przy wartości 22 zamienia prostokąt w pigułkę i dalej nic już nie zmienia, a elipsa przy ry równym 40 przestaje być elipsą i staje się kołem.

Gdzie ludzie się przewracają

Wróćmy na chwilę do polyline i polygon, bo to jedyne miejsce w tej lekcji, gdzie łatwo o poważny błąd.

Oba przyjmują identyczną listę punktów. Różnią się tym, że polygon zamyka kontur — i tym, że domyślne wypełnienie jest czarne. Dla wielokąta to zwykle w porządku. Dla łamanej to katastrofa: SVG domyka ją na potrzeby wypełnienia i zamiast linii dostajesz czarną plamę w kształcie kleksa.

Dlatego każda polyline używana jako linia potrzebuje jawnego fill="none". Ta sama zasada dotyczy path i będzie wracać przez cały kurs.

Te same cztery punkty po lewej i po prawej. Usuń fill="none" z pierwszego kształtu i zobacz, co się stanie — to jest dokładnie ten błąd, w wersji na żywo.

Kolejność zamiast z-index

Jest jeszcze jedna zasada, którą warto poznać teraz, bo obowiązuje wszędzie: w SVG nie ma z-index. O tym, co jest na wierzchu, decyduje wyłącznie kolejność w kodzie. Element zapisany później zasłania wcześniejszy.

To model malarski — kolejne warstwy farby kładzione jedna na drugiej. Jeśli coś zniknęło pod czymś innym, nie szukaj właściwości do ustawienia. Przesuń znacznik niżej.

Kiedy przestać

Kształty podstawowe kończą się tam, gdzie zaczyna się krzywa. Trójkąt, gwiazda, strzałka, ramka, kropka — wszystko to zrobisz szóstką z tej lekcji. Ale w chwili, gdy potrzebujesz łuku, fali albo zaokrąglonego przejścia między odcinkami, żaden z tych znaczników Ci nie pomoże.

Wtedy zaczyna się path — i to jest temat następnych trzech lekcji.

Podsumowanie

• Sześć kształtów podstawowych istnieje dla czytelności kodu, nie dla przeglądarki.
• rect liczy się od lewego górnego rogu, circle i ellipse od środka.
• rx w prostokącie zaokrągla narożniki; przy połowie wysokości daje pigułkę.
• polyline i polygon przyjmują te same punkty — różni je domknięcie konturu.
• Domyślne fill jest czarne, domyślny stroke żaden. Linia bez stroke jest niewidoczna, łamana bez fill="none" jest plamą.
• Nie ma z-index. Kolejność w kodzie to kolejność warstw.

Do wypróbowania: w presecie kształty zamień <polygon> na <polyline> z tymi samymi punktami i dopisz fill="none". Trójkąt zamieni się w otwartą literę V — bo brakuje odcinka, który wcześniej domykał się sam.