poniedziałek,
SVG: Oznaczenie dla niepełnosprawnych
Prezentowany projekt wykorzystano do wykonania tytułowej grafiki znajdującej się powyżej. Kod źródłowy przykładu znajdziesz na końcu materiału, dołączone do niego grafiki są w formacie SVG, możesz je zapisać i przeanalizować ich kod po otwarciu w edytorze tekstowym. Jeśli jesteś całkowicie początkujący, rozpocznij od zapoznania się naszymi starszymi materiałami:
- „Flaga Irlandii” – tworzenie prostokątów;
- „Flaga Japonii” – tworzenie koła;
- „Serce” – grupowanie elementów.
Pierwszy etap projektu to utworzenie siedzącej sylwetki. Osiągnięto to przy pomocy pięciu prostokątów i jednego koła. Na poniższej grafice elementom nadano pewien stopień przezroczystości i kontury, co pozwala łatwo zorientować się w sposobie ich ułożenia.
W kolejnej fazie obrócono grupę elementów tworzących tułów oraz grupę stanowiącą dolną część nogi. Tułów obrócono o -10° względem lewego dolnego rogu grupy elementów (rotate(-10 100 230)), nogę o -15° względem górnego prawego rogu pierwszego prostokąta w grupie (rotate(-15 250 200)). Transformacja rotate przyjmuje trzy argumenty, pierwszy to kąt obrotu w stopniach, kolejne dwa to współrzędne środka obrotu.
Do grafiki dodano koło pozbawione wypełnienia (fill="none") z nadanym obrysem w kolorze białym (stroke="#fff") o grubości 30 pikseli (stroke-width="30"). Na grafice powinna być widoczna tylko część koła, dlatego w jej ostatecznej wersji wykorzystano dostępny w formacie SVG mechanizm przycinania. Skrótowo rzecz biorąc, przycinanie polega na wyświetlaniu części wspólnej elementu oraz zdefiniowanej specjalnie ścieżki przycinania (clipPath). W prezentowanym przykładzie jest to widoczny na poniżej grafice kształt o czerwonym wypełnieniu utworzony za pomocą ścieżki (path). Liczby występujące w deklaracji atrybutu d ścieżki to współrzędne punktów, litery to komendy (M: ustawienie punktu rysowania, L: rysowanie linii, Z: zamknięcie ścieżki poprzez połączenie jej początku i końca). Przycięcie koła zostało wykonane w kolejnym kroku.
Przycięcie elementu następuje po dodaniu do niego atrybutu clip-path odnoszącego się do identyfikatora zadeklarowanej ścieżki przycinania (clip-path="url(#clip)"). Poniższa grafika to końcowa wersja projektu.
Poniżej znajduje się kod strony HTML z dołączoną grafiką w formacie SVG.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Piktogram</title>
</head>
<body>
<svg width="700" height="400">
<clipPath id="clip">
<path d="M 49 0 L 90 230 L 216 230 L 251 360 L 0 360 Z" />
</clipPath>
<rect x="0" y="0" width="700" height="400" fill="#135" />
<circle cx="150" cy="250" r="90" fill="none" stroke="#fff"
stroke-width="30" clip-path="url(#clip)" />
<g fill="#fff" transform="rotate(-10 100 230)">
<rect x="100" y="80" width="30" height="150" />
<circle cx="130" cy="80" r="30" />
</g>
<rect x="100" y="150" width="110" height="30" fill="#fff" />
<rect x="100" y="200" width="150" height="30" fill="#fff" />
<g fill="#fff" transform="rotate(-15 250 200)">
<rect x="220" y="200" width="30" height="130" />
<rect x="220" y="300" width="60" height="30" />
</g>
</svg>
</body>
</html>
