środa,
SVG: Płatek śniegu
Pierwszy etap projektu to utworzenie pojedynczego ramienia płatka śniegu. W przykładzie do wykonania tego zadania zastosowano ścieżkę (path), ponieważ zapewnia ona zwięzły zapis. Po utworzeniu bazowej części elementu (deklaracja: M300,300 h-300) zdefiniowano odgałęzienia (np. M150,250 L200,300 L150,350). Zwróć uwagę, że kluczowych punktach odgałęzień zmianie ulega tylko współrzędna x.
Ścieżkę tworzącą ramię płatka śniegu umieszczono w obrębie znacznika <defs>, co oznacza, że element jest traktowany jako wzorzec i nie jest wprost renderowany. Można odwołać się do niego za pomocą elementu <use> zawierającego odwołanie do identyfikatora wzorca (atrybutu id). Kolejne ramiona są obracane o wielokrotność 60° (360°/6) względem swojego początku (punktu (300,300)).
Ostatni etap to obrócenie (rotate(90 300,300)) grupy elementów tworzących płatek (g) o 90° względem jej środka i ich przesunięcie (translate(20,20)).
Poniżej znajduje się kod projektu 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="570" height="640" xmlns="http://www.w3.org/2000/svg"
style="background:#246;">
<defs>
<path id="p" fill="none" stroke="#fff"
stroke-width="22" stroke-linecap="round"
d="M300,300 h-300
M50,250 L100,300 L50,350
M100,250 L150,300 L100,350
M150,250 L200,300 L150,350
M200,250 L250,300 L200,350
" />
</defs>
<g transform="rotate(90 300,300) translate(20,20)">
<use href="#p" />
<use href="#p" transform="rotate(60 300,300)" />
<use href="#p" transform="rotate(120 300,300)" />
<use href="#p" transform="rotate(180 300,300)" />
<use href="#p" transform="rotate(240 300,300)" />
<use href="#p" transform="rotate(300 300,300)" />
</g>
</svg>Dla przypomnienia:
- w formacie SVG współrzędne liczone są od lewego górnego rogu obrazu;
- rozróżniane są wielkie i małe litery;
- w przypadku błędów składniowych grafika się nie wyświetla;
- brak określenia jednostki przy wymiarach oznacza, że przyjmowane są piksele;
- element <path> to ścieżka, liczby występujące w deklaracji atrybutu d ścieżki to współrzędne punktów, litery to komendy,
- atrybut stroke określa kolor obramowania, stroke-width jego szerokość, a stroke-linecap styl zakończenia linii.
