wtorek,
SVG: Wieża Eiffla
Wieża Eiffla to najbardziej znany obiekt architektoniczny Paryża, jej konstruktorem był Gustave Eiffel. Więcej informacji na temat znanego francuskiego inżyniera znajdziesz w artykule „Gustave Eiffel”.
Na końcu materiału dołączono kod źródłowy przykładu. Przydatne do wykonania projektu informacje znajdziesz w materiale „SVG: Ścieżki – łuk okręgu”. Do utworzenia przykładowej grafiki wykorzystano ścieżki. Atrybut d ścieżki zawiera komendy i argumenty. Komendy zapisane są literami, lista komend wykorzystanych w projekcie:
- M – ustawia punkt rysowania.
- L – rysuje linię prostą od bieżącego punktu.
- A – rysuje łuk eliptyczny.
- Z — kończy bieżącą ścieżkę łącząc aktualny punkt z jej początkiem.
Pierwszy element grafiki to grupa (g) z dołączonymi regułami dotyczącymi wypełnienia i konturu. Zawarte w niej elementy będą przejmować te własności bez potrzeby indywidualnych deklaracji. Założenia projektu przewidują, że końcowy kształt będzie składał się wyłącznie z konturów bez żadnych wypełnień. Dzięki temu grafikę będzie można umieszczać na dowolnym tle, także niejednorodnym (np. zdjęcie lub gradient).
Podstawa wieży to ścieżka (path) tworząca odcinek (komenda L) oraz dwa prostokąty (rect) z zaokrąglonymi rogami (atrybut rx). Kolejny element to ścieżka zbudowana z odcinków i jednego łuku (komenda A). Kolejny element jest trochę bardziej złożony, jednak powstał na bazie takich samych komend (łuki i odcinki).
W kolejnym kroku połączono dwie ostatnio utworzone ścieżki i dodano do nich kolejny kształt, który powstał na bazie dwóch odcinków i łuku. Następnymi elementami grafiki są tarasy widokowe, żeby spełnić założenia projektu (brak wypełnień) kształt musi być przycięty. Skrótowo rzecz biorąc, przycinanie polega na wyświetlaniu części wspólnej elementu oraz obszaru zdefiniowanej specjalnie ścieżki przycinania (clipPath). Na potrzeby prezentowanej grafiki ścieżkę przycinania zbudowano z trzech prostokątów. Element <clipPath> zadeklarowano w obrębie znacznika <defs>, dzięki czemu nie jest on renderowany, można się do niego odwoływać za pomocą atrybutu clip-path z odpowiednim identyfikatorem.
Tarasy widokowe to proste do wykonania ścieżki składające się z odcinków. Kolejny element zbudowano z trzech łuków i trzech odcinków. W końcowej wersji grafiki dołączono jeszcze ścieżkę tworzącą skierowany ku górze odcinek.
Poniżej znajduje się kod źródłowy przykładu, możesz go wkleić do edytora tekstowego (np. notatnika) i zapisać z rozszerzeniem svg lub wstawić do kodu strony internetowej.
<svg width="250" height="300" xmlns="http://www.w3.org/2000/svg"
style="background:#579;">
<defs>
<clipPath id="cp">
<rect x="10" y="10" width="230" height="170" />
<rect x="10" y="190" width="230" height="30" />
<rect x="10" y="230" width="230" height="55" />
</clipPath>
</defs>
<g fill="none" stroke="#fff" stroke-width="3"
stroke-linejoin="round">
<path d="M10,290 L240,290" />
<rect x="50" y="280" width="40" height="10" rx="3" />
<rect x="160" y="280" width="40" height="10" rx="3" />
<path d="M85,280
A 40 30 0 0 1 165,280
L195,280 L155,230 L135,90
A 10 10 0 0 0 145,80
L145,75 L105,75 L105,80
A 10 10 0 0 0 115,90
L95,230 L55,280 L85,280
M125,120 L115,230
A 10 8 0 0 0 135,230
L125,120"
clip-path="url(#cp)" />
<path d="M95,230 L 90,220 L160,220 L155,230 Z" />
<path d="M100,190 L 95,180 L155,180 L150,190 Z" />
<path d="M105,75
A 10 10 0 0 1 110,65 L115,65
A 10 15 0 0 1 135,65 L140,65
A 10 10 0 0 1 145,75 Z" />
<path d="M125,50 L125,10" />
</g>
</svg>
