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ł: Firma Dell

Firma Dell

Artykuł: Intel 80286

Intel 80286

Artykuł: Staże zawodowe techników informatyków

Staże zawodowe techników informatyków

Artykuł: Studniówka

Studniówka

Artykuł: Staże zawodowe mechaników pojazdów samochodowych

Staże zawodowe mechaników pojazdów samochodowych

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły