Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

SVG: Ikona nadajnika

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.

Okręgi

Przycięcie

Nadajnik

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>
Artykuł: Kolejne dni w Granadzie

Kolejne dni w Granadzie

Artykuł: Netplan

Netplan

Artykuł: Staże w Granadzie

Staże w Granadzie

Artykuł: Harmonogram egzaminów maturalnych

Harmonogram egzaminów maturalnych

Artykuł: Staże w Hiszpanii

Staże w Hiszpanii

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły