Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

SVG: Ping pong

czwartek,

SVG: Ping pong

Projekt rakietki do tenisa stołowego jest łatwy do wykonania. Minimalistyczna grafika jednak w niektórych zastosowaniach sprawdza się doskonale, np. w przypadku ikon skalowanych do bardzo małych rozmiarów,

Elementy wchodzące w skład grafiki tworzą grupę (element g), dzięki temu można je łatwo obracać, a także skorzystać z mechanizmu dziedziczenia własności określających wypełnienie i kontur – elementy potomne przejmują własności rodzica i nie muszą mieć indywidualnej deklaracji. W pierwszym kroku utworzono okrąg (element circle bez wypełnienia z nadanym konturem). Aby zimitować okładzinę rakietki, w odpowiednim miejscu do obrazu dodano odcinek (line). W kolejnym etapie dołączono rączkę (trapez utworzony za pomocą elementu polygon) oraz piłeczkę (kolejny element circle). Tym razem obydwa elementy otrzymały wypełnienie (fill="#fff"). W ostatecznej wersji grafiki grupę elementów obrócono (rotate) o kąt 30° względem punktu o współrzędnych (130, 120).

Okrąg

Rączka

Rakietka

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="260" height="310" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="#353535" stroke-width="5" transform="rotate(30 130 120)">
   <circle cx="130" cy="120" r="100" />
   <line x1="50" y1="180" x2="210" y2="180" />
   <polygon points="110,180 105,300 155,300 150,180" fill="#fff" />
   <circle cx="220" cy="120" r="30" fill="#fff" />
 </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;
  • element <circle> to koło, jego atrybuty cx i cy to współrzędne środka, r określa promień;
  • element <line> to odcinek, atrybuty: x1 i y1 – współrzędne początku, x2 i y3 – współrzędne końca;
  • element <polygon> to wielokąt, atrybut points zawiera współrzędne wierzchołków.
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