piątek, 2022-12-09

SVG: Piłka do piłki nożnej

W formacie SVG współrzędne domyślnie obliczane są względem lewego górnego rogu grafiki. Aby uniknąć dodatkowego przeliczania współrzędnych punktów, elementy składowe obrazu zgrupowano (element g) i przesunięto (translate(110,110)) na środek grafiki. Zwróć uwagę, że oś Y nadal jest skierowana do dołu.

Pierwszy etap projektu to utworzenie koła (circle) i wyznaczenie współrzędnych kluczowych punktów. Ich wartości wyznaczono wykorzystując równanie parametryczne okręgu za pomocą poniższych formuł:

• x = r * cos α;
• y = r * sin α.

Parametr r to promień okręgu, w grę wchodzą trzy okręgi o promieniach: 40, 80 i 100 pikseli. Ustalenie współrzędnych pierwszych punktów nie wymaga obliczeń, będzie to punkt o współrzędnych (długość promienia, 0). Kolejne punkty dzielą okrąg na pięć równych części, dlatego kąt α będzie przyjmował wartości będące wielokrotnościami 72° (360°/5), czyli 72°, 144°, 216° oraz 288°. Do obliczeń można wykorzystać jakieś narzędzie, możesz skorzystać z przykładowej formuły dla kalkulatora Google: cos((3*72)deg) * 100 dla współrzędnej x czwartego poszukiwanego punktu okręgu o promieniu 100. Dla współrzędnej y należy zmienić cos na sin, dla innych punktów wystarczy w formule zmienić liczbę 3 oraz dla innych okręgów promień na właściwą wartość. W projekcie przyjęto przybliżenia otrzymanych wartości, ułatwia to pracę, a w tym przypadku trudno zauważyć różnicę 0,1 piksela nawet po ekstremalnym powiększeniu.

W kolejnym kroku na środku koła za pomocą elementu polygon utworzono pięciokąt oraz dodano odcinki (elementy line) łączące środek koła z jego obwodem. Ostatnie detale widoczne na grafice otrzymano za pomocą trójkątów równoramiennych, w finalnej wersji zostały one przekształcone do właściwego kształtu za pomocą mechanizmu przycinania.

Po utworzeniu pierwszego trójkąta za pomocą elementu polygon przeniesiono jego kod do znacznika <defs>, elementy, które są zawarte w <defs> nie są bezpośrednio renderowane, na podstawie identyfikatorów (atrybut id) można się do nich odwoływać. Trójkąty wstawiono do dokumentu jako elementy <use> wskazujące na właściwy identyfikator (href="#tri"). Cztery z nich zostały obrócone o właściwy kąt względem środka koła (np. transform="rotate(72)").

Skrótowo rzecz biorąc, przycinanie polega na wyświetlaniu części wspólnej elementu oraz zdefiniowanej specjalnie ścieżki przycinania (clipPath). W odcięciu wykonanym w prezentowanym przykładzie jako ścieżkę odcinania wykorzystano koło. Zwróć uwagę, że ma ono zwiększony promień w stosunku do koła widocznego na grafice, wynika to z własności obrysu – jego część znajduje się poza obszarem kształtu i identyczne koło jako wzorzec odcięcia spowodowałoby modyfikację konturu. Odcięcie deklaruje się za pomocą atrybutu clip-path zawierającego identyfikator ścieżki przycinania, np. clip-path="url(#clip)".

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="220" height="220" transform="scale(1,-1)" 
  xmlns="http://www.w3.org/2000/svg">
  <defs>
      <polygon id="tri" points="80,0 100,40 100,-40" />
      <clipPath id="clip">
        <circle cx="0" cy="0" r="101" fill="none" />
      </clipPath>
  </defs>
  <g transform="translate(110,110)" clip-path="url(#clip)"
     stroke="#353535" stroke-width="2">
    <circle cx="0" cy="0" r="100" fill="#eee" />
    <line x1="0" y1="0" x2="100" y2="0" />
    <line x1="0" y1="0" x2="31" y2="95" />
    <line x1="0" y1="0" x2="-81" y2="59" />
    <line x1="0" y1="0" x2="-81" y2="-59" />
    <line x1="0" y1="0" x2="31" y2="-95" />
    <polygon points="40,0 12,38 -32,24 -32,-24 12,-38" />
    <use href="#tri" />
    <use href="#tri" transform="rotate(72)" />
    <use href="#tri" transform="rotate(144)" />
    <use href="#tri" transform="rotate(216)" />
    <use href="#tri" transform="rotate(288)" />
  </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.