czwartek,
SVG: Złota bombka choinkowa
Na końcu materiału znajdziesz kod źródłowy przykładu. Oczywiście tytułową bombkę można wykonać w innym kolorze, jednak w takim przypadku będziesz musiał samodzielnie przygotować odpowiednie gradienty. Przydatne do wykonania projektu informacje znajdziesz w materiałach „SVG: Ścieżki – łuk okręgu” oraz „SVG: Kula”, po zapoznaniu się z nimi prezentowana grafika okaże się bardzo łatwa do wykonania.
Grafika ma wymiary 600 × 550 pikseli, które zdefiniowano w atrybutach width i height elementu <svg>. Na bombkę składają się trzy główne części, największą z nich utworzono za pomocą ścieżki (path) zawierającej dwie linie (komenda L) oraz dwa łuki (komenda A). Kolejne elementy składowe obrazu zadeklarowano jako ścieżkę tworzącą prostokąt oraz pozbawione wypełnienia (fill="null") koło (circle) z obramowaniem (stroke).
Ostatnia faza prac to wypełnienie elementów gradientem. W formacie SVG dostępne są gradienty liniowe (linearGradient) oraz radialne (radialGradient), w projekcie zastosowano obydwa typy. Definicje gradientów powinno umieszczać się w elemencie <defs>. Zawarte w deklaracji gradientu elementy <stop> to definicje kolorów (atrybut stop-color) składowych gradientu z określonym miejscem rozpoczęcia przejścia tonalnego (atrybut offset). Kolorów składowych może być wiele, w przykładzie ograniczono się do trzech. Do zdefiniowanego gradientu można odwołać się za pomocą jego identyfikatora umieszczonego w atrybucie fill (np. fill="url(#gold-2)").
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="600" height="550" xmlns="http://www.w3.org/2000/svg"
style="background:#1e2131;">
<defs>
<radialGradient id="gold-1" r="75%" cx="25%" cy="30%">
<stop offset="20%" stop-color="#f8f4B8" />
<stop offset="50%" stop-color="#e7c58a" />
<stop offset="95%" stop-color="#8b5517" />
</radialGradient>
<linearGradient id="gold-2">
<stop offset="10%" stop-color="#f8f4B8" />
<stop offset="30%" stop-color="#eccE76" />
<stop offset="70%" stop-color="#d79859" />
</linearGradient>
</defs>
<circle cx="300" cy="55" r="35" fill="none"
stroke="url(#gold-2)" stroke-width="8" />
<path d="M260,105 A 200 200 0 1 0 340,105
L 340,70 A 200 200 0 0 1 260,70 Z"
fill="url(#gold-1)" />
<path d="M255,105 L345,105 L345,70 L255,70 Z"
fill="url(#gold-2)" stroke="none" stroke-width="1" />
<g stroke="#7F470A" stroke-width="3" opacity=".8">
<path d="M255,80 L345,80" />
<path d="M255,70 L345,70" />
</g>
</svg>
