wtorek,
SVG: Ikona nadajnika
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. Osoby całkowicie początkujące powinny zapoznać się z materiałem „Flaga Japonii”, dowiedzą się z niego, jak tworzyć koło.
Pierwszy etap projektu to utworzenie trzech kół o wspólnym środku. Są one pozbawione wypełnienia (fill="none") i mają czarny obrys (stroke="#000"). Koła zostały zgrupowane (element <g>), aby przycinając grupę, nadać grafice ostateczny kształt. Skrótowo rzecz biorąc, przycinanie polega na wyświetlaniu części wspólnej elementu oraz zdefiniowanej specjalnie ścieżki przycinania (clipPath). W projekcie ścieżką przycinania jest wielokąt (polygon) o specyficznym kształcie będącym sumą dwóch trójkątów. W ostatecznej wersji grafiki dodano dwa elementy imitujące antenę radiową, jest to kolejne koło oraz wysoki trapez.
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="400" height="400" xmlns="http://www.w3.org/2000/svg">
<clipPath id="clip">
<polygon points="200,200 0,400 0,0 200,200 400,0 400,400 200,200" />
</clipPath>
<g fill="none" clip-path="url(#clip)">
<circle cx="200" cy="200" r="150" stroke="#000" stroke-width="25" />
<circle cx="200" cy="200" r="100" stroke="#000" stroke-width="20" />
<circle cx="200" cy="200" r="60" stroke="#000" stroke-width="15" />
</g>
<circle cx="200" cy="200" r="30" fill="#000" />
<polygon points="190,200 180,350 220,350 210,200" fill="#000" />
</svg>
