środa,
SVG: Ikona dysku twardego
Na końcu materiału znajdziesz kod źródłowy przykładu.
W pierwszym kroku utwórz pustą grupę elementów (element g). Pozostałe elementy znajdą się w jej wnętrzu. Grupa jest potrzebna, żeby skorzystać z mechanizmu dziedziczenia i nie dopisywać im indywidualnych atrybutów, będą je przejmować z elementu nadrzędnego. Nadaj grupie atrybuty określające wypełnienie (fill), obramowanie (stroke) oraz szerokość obramowania (stroke-width).
Kolejnym elementem jest prostokąt (rect), atrybuty x i y to współrzędne jego lewego rogu, width i height to szerokość i wysokość. W formacie SVG wartości współrzędnych domyślnie określane są od lewego górnego rogu. Jeśli w deklaracjach określających rozmiar nie ma jednostki, przyjmowane są piksele. Za pomocą atrybutu rx zaokrąglij rogi prostokąta. W rogach prostokąta umieść małe koła. Środek koła określa się przy pomocy atrybutów cx i cy, r to promień. Następny element to składający się z dwóch kół talerz dysku.
Najtrudniejsze do wykonania jest ramię głowicy dysku. Do jego utworzenia wykorzystaj ścieżkę (path) składającą się z dwóch linii i łuku eliptycznego. 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.
Informacje na temat tworzenia łuku znajdziesz w materiale „SVG: Ścieżki – łuk okręgu”, zastosuj niewielki promień. Rysowanie linii jest proste, deklaracja ”M80,150 L180,210" oznacza, że powstaje linia od bieżącego punktu (ma on współrzędne (80,150)) do punktu o współrzędnych (180,210).
Ostatnie dwa elementy dodano, aby uzyskać wrażenie trzeciego wymiaru. Ich deklaracje umieszczono na początku pliku, przed innymi obiektami, dzięki temu są one w części „przykryte”. Obydwa nowe elementy to kopia pierwszego prostokąta z niewielkimi modyfikacjami polegającymi na zwiększeniu wartości współrzędnej y (są przesunięte w pionie) oraz zmianie dziedziczonego z grupy wypełnienia lub obramowania (indywidualne atrybuty fill i stroke).
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="240" height="340" xmlns="http://www.w3.org/2000/svg">
<g fill="#eee" stroke="#444" stroke-width="5">
<rect x="10" y="45" rx="20" width="220" height="280" fill="#444" />
<rect x="10" y="12" rx="20" width="220" height="280" stroke="#eee" />
<rect x="10" y="10" rx="20" width="220" height="280" />
<circle cx="35" cy="35" r="10" />
<circle cx="35" cy="265" r="10" />
<circle cx="205" cy="265" r="10" />
<circle cx="205" cy="35" r="10" />
<circle cx="120" cy="120" r="90" />
<circle cx="120" cy="120" r="30" />
<path d="M80,150 L180,210 A 10 10 0 0 1 160,230 L80,150" />
</g>
</svg>
