wtorek,
SVG: Choinka z łuków okręgów
Na końcu materiału znajdziesz kod źródłowy przykładu. Pracę nad projektem rozpocznij od zapoznania się z artykułem „SVG: Ścieżki – łuk okręgu”, prezentowany przykład to wykorzystanie zawartych tam informacji w praktyce. Do utworzenia choinki wykorzystano ścieżkę (path) i łuki eliptyczne, jej atrybut d zawiera komendy i argumenty. Komendy zapisane są literami:
- M – ustawia punkt rysowania,
- L – rysuje linię prostą od bieżącego punktu,
- Z – zakończ ścieżkę łącząc bieżący punkt z jej początkiem,
- A – rysuj łuk eliptyczny.
Ścieżka domyślnie ma czarne wypełnienie (atrybut fill), możesz zmienić jego kolor (np. fill="green") lub z niego zrezygnować (fill="none"). Za obramowanie odpowiada atrybut stroke. Prezentowana grafika ma wymiary 500 na 500 pikseli. W pierwszym kroku musisz określić kluczowe punkty kształtu, najlepiej rozpocząć od góry. Jako współrzędną x pierwszego punktu przyjęto połowę szerokości grafiki, choinka nie powinna przylegać do brzegu obrazu, dlatego współrzędna y ma wartość trochę większą od zera. W formacie SVG domyślnie współrzędne liczone są od lewego górnego rogu grafiki, w projekcie pierwszy punkt otrzymał współrzędne (250,10).
Na początku najłatwiej narysować jedną stronę choinki za pomocą linii, a następnie odbić punkty względem osi symetrii i przekształcić odcinki w łuki. Kolejny punkt otrzymał współrzędne (150,160) i znalazł się z lewej strony. Pierwszy odcinek można utworzyć za pomocą atrybutu d z wartością „M250,10 L150,160”, dopisując kolejne komendy L z odpowiednimi współrzędnymi, utworzysz lewą stronę choinki. Aby efekt pracy był widoczny już przy pierwszym odcinku, ścieżka otrzymała obramowanie (stroke).
Odbijając punkty po prawej stronie, współrzędną y przepisz z pierwowzoru. Współrzędna y powstanie po odjęciu od szerokości grafiki (500) wartości współrzędnej y pierwowzoru. Kolejny etap projektu to przekształcenie odcinków w krzywe. Najwięcej pracy wymaga dopasowanie promienia, jeśli będziesz eksperymentować, szybko zorientujesz się, jak wpływa on na kształt. Ponownie zacznij od góry i lewej strony, później po prawej stronie wystarczy przepisać parametry bliźniaczych łuków, zachowując odmienne punkty.
Po utworzeniu wszystkich łuków możesz usunąć obramowanie i dodaj ścieżkę rysującą pień drzewka, będzie się ona składać z dwóch linii i jednego łuku.
Poniżej znajduje się kod przykładu zapisany formacie SVG. Możesz go wkleić do edytora tekstowego (np. notatnika) i zapisać z rozszerzeniem svg lub wstawić do kodu strony internetowej.
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"
style="background:#989898;">
<path d="M230,390 L230,480
A 40 40 0 0 0 270,480
L 270,390"
fill="#210a07" />
<path d="M250,10
A 300 300 0 0 1 150,160
A 80 80 0 0 0 185,175
A 260 260 0 0 1 110,250
A 80 80 0 0 0 140,270
A 260 260 0 0 1 70,340
A 300 300 0 0 0 430,340
A 260 260 0 0 1 360,270
A 80 80 0 0 0 390,250
A 260 260 0 0 1 315,175
A 80 80 0 0 0 350,160
A 300 300 0 0 1 250,10"
fill="green" />
</svg>
