wtorek,
SVG: Kokarda narodowa z powstania wielkopolskiego
27 grudnia to Narodowy Dzień Zwycięskiego Powstania Wielkopolskiego. Zakoduj w formacie SVG kokardę noszoną podczas zrywu niepodległościowego Wielkopolan na przełomie 1918 i 1919 roku.
Na końcu materiału znajdziesz 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.
- Q – rysuje kwadratową krzywą Béziera.
- T – rysuje krzywą Béziera drugiego stopnia, jeśli poprzednia komenda tworzyła krzywą Béziera, odbicie jej punktu kontrolnego staje się punktem kontrolnym dla T.
- Z — kończy bieżącą ścieżkę łącząc aktualny punkt z jej początkiem.
Pierwszy element grafiki powstał na bazie kształtu zbliżonego do trójkąta. Jeden z „boków trójkąta” składa się z dwóch części, pierwsza z nich to kwadratowa krzywa Béziera, jej punkt kontrolny „przyciąga” odcinek, tworząc owal. W przypadku drugiej części „boku” zastosowano komendę T i otrzymano gładką kontynuację poprzedniej krzywej. Bazowy element otrzymał wypełnienie (atrybut fill) oraz kontur (atrybut stroke).
W kolejnym kroku deklarację bazowego elementu przeniesiono w obręb znacznika <defs>, nadano mu identyfikator (id="red-1") i usunięto jego wypełnienie oraz kontur. Elementy zawarte w znaczniku <defs> nie są bezpośrednio renderowane, można się do nich odwoływać za pomocą odpowiedniego identyfikatora.
Do obrazu dodano grupę (element <g>) z określonym kolorem wypełnienia i konturu. Za pomocą elementów <use> zawierających odwołanie do identyfikatora wzorca do grafiki wstawiono jego pięć egzemplarzy obracanych o wielokrotność 18° względem punktu o współrzędnych (150,150). Z grupy utworzono kolejny wzorzec zawarty w elemencie <defs>, a następnie dołączono jego cztery obracane o wielokrotność 90° egzemplarze do obrazu. W ten sposób powstał kształt przypominający koło.
Biała część kokardy powstała w podobny sposób, poprzez obracanie kopii elementu bazowego. Dopełnieniem kokardy jest niewielkie białe koło (circle) umieszczone na środku grafiki.
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="300" height="300" xmlns="http://www.w3.org/2000/svg"
style="background:#343434;">
<defs>
<path id="red-1" d="M150,150 L280,150 Q290,140 278,125 T275,100 Z" />
<g id="red-5">
<use href="#red-1" />
<use href="#red-1" transform="rotate(-18 150 150)" />
<use href="#red-1" transform="rotate(-36 150 150)" />
<use href="#red-1" transform="rotate(-54 150 150)" />
<use href="#red-1" transform="rotate(-72 150 150)" />
</g>
<path id="w-1" d="M150,150 L225,163 Q230,160 225,150 T225,137" />
<g id="w-5">
<use href="#w-1" />
<use href="#w-1" transform="rotate(-18 150 150)" />
<use href="#w-1" transform="rotate(-36 150 150)" />
<use href="#w-1" transform="rotate(-54 150 150)" />
<use href="#w-1" transform="rotate(-72 150 150)" />
</g>
</defs>
<g fill="#a00" stroke="#ccc">
<use href="#red-5" />
<use href="#red-5" transform="rotate(-90 150 150)" />
<use href="#red-5" transform="rotate(-180 150 150)" />
<use href="#red-5" transform="rotate(-266 150 150)" />
</g>
<g fill="#eee" stroke="#555">
<use href="#w-5" />
<use href="#w-5" transform="rotate(-90 150 150)" />
<use href="#w-5" transform="rotate(-180 150 150)" />
<use href="#w-5" transform="rotate(-268 150 150)" />
<circle cx="150" cy="150" r="10" stroke="none" />
</g>
</svg>
