Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

SVG: Ikona prezentu

poniedziałek,

SVG: Ikona prezentu

Prezentowaną grafikę wykonano przy pomocy dwóch ścieżek (elementy path). Podobny efekt można uzyskać, stosując dwie elipsy (element ellipse) i cztery prostokąty (element rect), jednak przykład jest dobrym wprowadzeniem do tworzenia ścieżek.

Pierwszym i najtrudniejszym do wykonania elementem grafiki jest ścieżka stanowiąca kokardę przewiązującą paczkę z prezentem. Składa się ona z dwóch części (zawartych w atrybucie d) będących łukami eliptycznymi (komenda A). Więcej o tworzeniu łuków dowiesz się z materiału „SVG: Ścieżki – łuk okręgu”. Po utworzeniu lewej strony kokardy odbij ją symetrycznie w poziomie. Element został pozbawiony wypełnienia (fill="none") i otrzymał obramowanie (stroke="#C38737") o szerokości 10 pikseli (stroke-width="10").

Druga ścieżka to cztery odpowiednio ułożone prostokąty. Do jej utworzenia wykorzystano dwie kilkukrotnie wywołane komendy:

  • M – ustawia współrzędne punktu rysowania;
  • L – tworzy linię od bieżącego punktu do punktu o podanych współrzędnych.

Wszystko sprowadza się do wyznaczenia odpowiednich punktów. Pamiętaj, że w formacie SVG współrzędne domyślnie obliczane są od lewego górnego rogu.

Poniżej znajduje się kod przykładu 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="270" height="250" xmlns="http://www.w3.org/2000/svg"
	  style="background:#232730;">
  <path d="M120,60 A 14 28 -50 1 1 125,60 L 120,60
           M145,60 A 14 28 50 1 1 150,60 L 140,60"
    stroke="#C38737" stroke-width="10" fill="none" />
  <path d="M10,60 L132,60 L 132,100 L 10,100
           M138,60 L260,60 L260,100 L138,100
           M25,106 L132,106 L132,230 L25,230
           M138,106 L245,106 L245,230 L138,230"
    fill="#C38737" />
</svg>
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