Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

SVG: Płatek śniegu

środa,

SVG: Płatek śniegu

Pierwszy etap projektu to utworzenie pojedynczego ramienia płatka śniegu. W przykładzie do wykonania tego zadania zastosowano ścieżkę (path), ponieważ zapewnia ona zwięzły zapis. Po utworzeniu bazowej części elementu (deklaracja: M300,300 h-300) zdefiniowano odgałęzienia (np. M150,250 L200,300 L150,350). Zwróć uwagę, że kluczowych punktach odgałęzień zmianie ulega tylko współrzędna x.

Ścieżkę tworzącą ramię płatka śniegu umieszczono w obrębie znacznika <defs>, co oznacza, że element jest traktowany jako wzorzec i nie jest wprost renderowany. Można odwołać się do niego za pomocą elementu <use> zawierającego odwołanie do identyfikatora wzorca (atrybutu id). Kolejne ramiona są obracane o wielokrotność 60° (360°/6) względem swojego początku (punktu (300,300)).

Ostatni etap to obrócenie (rotate(90 300,300)) grupy elementów tworzących płatek (g) o 90° względem jej środka i ich przesunięcie (translate(20,20)).

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="570" height="640" xmlns="http://www.w3.org/2000/svg"
     style="background:#246;">
  <defs>
  <path id="p" fill="none" stroke="#fff"
    stroke-width="22" stroke-linecap="round"
    d="M300,300 h-300 
      M50,250 L100,300 L50,350
      M100,250 L150,300 L100,350
      M150,250 L200,300 L150,350
      M200,250 L250,300 L200,350
  " />
  </defs>
  <g transform="rotate(90 300,300) translate(20,20)">
    <use href="#p" />
    <use href="#p" transform="rotate(60 300,300)" />
    <use href="#p" transform="rotate(120 300,300)" />
    <use href="#p" transform="rotate(180 300,300)" />
    <use href="#p" transform="rotate(240 300,300)" />
    <use href="#p" transform="rotate(300 300,300)" />
  </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 <path> to ścieżka, liczby występujące w deklaracji atrybutu d ścieżki to współrzędne punktów, litery to komendy,
  • atrybut stroke określa kolor obramowania, stroke-width jego szerokość, a stroke-linecap styl zakończenia linii.
Artykuł: DRAM Speculative Leadoff

DRAM Speculative Leadoff

Artykuł: Burst Mode DMA

Burst Mode DMA

Artykuł: Tryby DMA

Tryby DMA

Artykuł: DMA w kontekście historycznym

DMA w kontekście historycznym

Artykuł: Bezpośredni dostęp do pamięci

Bezpośredni dostęp do pamięci

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły