czwartek,
SVG: Choinki
Pierwszy etap projektu to wykonanie wzorcowej choinki, składa się ona z zielonego trójkąta oraz brązowego prostokąta, utworzonych za pomocą elementu <polygon> (wielokąt). Ich deklaracje powielono w obrębie znacznika <defs>, prostokąt stanowi wzorzec pnia, trójkąt ścieżkę przycinania (clipPath). W formacie SVG zawartość znacznika <defs> nie jest bezpośrednio renderowana, do zapisanych tam obiektów można się odwoływać.
Następny krok to utworzenie elementów składowych kolejnych choinek. Na tym etapie ich kształt jest nieco mylący, jednak ostatecznie zostaną one przycięte do właściwej formy. Pień każdej nowej choinki to wstawiony do grafiki za pomocą znacznika <use> wykonany wcześniej wzorzec. Drugi element składowy to kwadrat utworzony z grupy (element <g>) pięciu różnokolorowych pasów. W odróżnieniu od pozostałych, w choince nr 4 zastosowano pionowe pasy. W choince nr 5 pasy nie przylegają do siebie, między nimi powstają przezroczyste obszary. W ostatniej choince podobny efekt osiągnięto za pomocą obramowania (stroke) pasów. Elementy składowe każdej nowej choinki zostały zgrupowane (element <g>) i przesunięte w poziomie o wielokrotność 100 pikseli (np. transform="translate(200,0)").
W finalnej wersji grafiki grupy pasów przycięto do właściwego kształtu (clip-path="url(#ch)"). Analizując kod źródłowy zwróć uwagę, że elementy zostają najpierw przycięte, a dopiero później przesunięte w poziomie, dzięki temu nie ma potrzeby tworzenia indywidualnych ścieżek przycinania.
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="600" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<polygon id="p" points="40,100 60,100 60,120 40,120" fill="brown" />
<clipPath id="ch">
<polygon points="50,0 100,100 0,100" />
</clipPath>
</defs>
<g id="ch1" fill="#809c13">
<polygon points="50,0 100,100 0,100" />
<use href="#p" />
</g>
<g id="ch2" transform="translate(100,0)">
<g clip-path="url(#ch)">
<polygon points="0,0 100,0 100,20 0,20" fill="#0f0" />
<polygon points="0,20 100,20 100,40 0,40" fill="#a00" />
<polygon points="0,40 100,40 100,60 0,60" fill="#0d0" />
<polygon points="0,60 100,60 100,80 0,80" fill="#007" />
<polygon points="0,80 100,80 100,100 0,100" fill="#f00" />
</g>
<use href="#p" />
</g>
<g id="ch3" transform="translate(200,0)">
<g clip-path="url(#ch)">
<polygon points="0,0 100,0 100,20 0,20" fill="#5d7520" />
<polygon points="0,20 100,20 100,40 0,40" fill="#53691d" />
<polygon points="0,40 100,40 100,60 0,60" fill="#475919" />
<polygon points="0,60 100,60 100,80 0,80" fill="#3b4a14" />
<polygon points="0,80 100,80 100,100 0,100" fill="#2f3b10" />
</g>
<use href="#p" />
</g>
<g id="ch4" transform="translate(300,0)">
<g clip-path="url(#ch)">
<polygon points="0,0 20,0 20,100 0,100" fill="#5d7520" />
<polygon points="20,0 40,0 40,100 20,100" fill="#53691d" />
<polygon points="40,0 60,0 60,100 40,100" fill="#475919" />
<polygon points="60,0 80,0 80,100 60,100" fill="#3b4a14" />
<polygon points="80,0 100,0 100,100 80,100" fill="#2f3b10" />
</g>
<use href="#p" />
</g>
<g id="ch5" transform="translate(400,0)">
<g clip-path="url(#ch)">
<polygon points="0,0 100,0 100,20 0,20" fill="#5d7520" />
<polygon points="0,23 100,23 100,40 0,40" fill="#53691d" />
<polygon points="0,43 100,43 100,60 0,60" fill="#475919" />
<polygon points="0,63 100,63 100,80 0,80" fill="#3b4a14" />
<polygon points="0,83 100,83 100,100 0,100" fill="#2f3b10" />
</g>
<use href="#p" />
</g>
<g id="ch6" transform="translate(500,0)">
<g stroke="blue" stroke-width="3" clip-path="url(#ch)">
<polygon points="0,0 100,0 100,20 0,20" fill="#5d7520" />
<polygon points="0,20 100,20 100,40 0,40" fill="#53691d" />
<polygon points="0,40 100,40 100,60 0,60" fill="#475919" />
<polygon points="0,60 100,60 100,80 0,80" fill="#3b4a14" />
<polygon points="0,80 100,80 100,100 0,100" fill="#2f3b10" />
</g>
<use href="#p" />
</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.
