środa, 2022-12-07

SVG: Samolot

Prezentowana grafika składa się z dwóch wielokątów (polygon) stanowiących skrzydła oraz prostokąta (rect) o zaokrąglonych rogach (atrybut rx). Elementy zgrupowano (znacznik g) i obrócono o -45° względem punktu o współrzędnych (170, 170). Grupowanie dało także możliwość skorzystania z mechanizmu dziedziczenia określającej kolor wypełnienia wartości atrybutu fill, elementy potomne przejmują ją z własności rodzica i nie muszą mieć indywidualnej deklaracji.

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">
  <g fill="#353535" transform="rotate(-45 170 170)">
   <rect x="20" y="180" rx="30" width="380" height="60" />
   <polyline points="280,210 190,0 150,0 180,210 150,400 190,400 280,210" />
   <polyline points="20,210 0,130 40,130 80,210 40,290 0,290 20,210" />
 </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 <rect> to prostokąt, jego atrybuty x i y to współrzędne lewego górnego rogu, width oraz height to długość i szerokość;
• element <polygon> to wielokąt, atrybut points zawiera współrzędne wierzchołków.