Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

SVG: Ikona dysku twardego

ś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>

Trzy miesiące temu na naszej stronie…

Artykuł: Charles Dickens

Charles Dickens

Artykuł: GD-ROM

GD-ROM

Artykuł: Korekcja współczynnika mocy

Korekcja współczynnika mocy

Artykuł: Pasywne zasilacze komputerowe

Pasywne zasilacze komputerowe

Artykuł: Optimum Power Calibration

Optimum Power Calibration

Artykuł: Bash: Instrukcje warunkowe

Bash: Instrukcje warunkowe

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły