Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

SVG: Bombka choinkowa

wtorek,

SVG: Bombka choinkowa

Na końcu materiału znajdziesz kody źródłowe prezentowanych przykładów. Po wklejeniu kodu wybranego przykładu do edytora tekstowego (np. notatnika) zapisz go jako plik z rozszerzeniem svg.

Bazowy kształt bombki choinkowej (rys. 1) jest łatwy do wykonania i składa się z dwóch kół (circle) oraz prostokąta (rect). Dwie z figur otrzymały wypełnienie kolorem (atrybut fill), mniejsze koło ma tylko obramowanie (stroke). Zmieniając kolor większego koła, można otrzymać przytłaczającą ilość wariantów bombki, jednak warto dodać jeszcze jakieś elementy ozdobne. Mogą to być różnego rodzaju kształty, zależy to tylko od pomysłowości autora grafiki.

Dopasowanie zdobień do kształtu bombki mogłoby się wiązać z koniecznością stosowania wyszukanych kształtów (np. ścieżek z łukami), jednak format SVG udostępnia mechanizm przycinania (clip-path), który pozwala to znacznie uprościć. W uproszczeniu przycinanie to wyznaczenie części wspólnej elementu i obszaru zajmowanego przez ścieżkę odcinania. W prezentowanych przykładach ścieżką przycinania (clipPath) jest kopia większego koła. Element <clipPath> zadeklarowano w obrębie znacznika <defs>, dzięki czemu nie jest on renderowany, można się do niego odwoływać za pomocą atrybutu clip-path z odpowiednim identyfikatorem.

Rys. 1

Rys. 2

Rys. 3

Kolejne przykłady to kilka alternatywnych zdobień bombki, jednak wszystkie one korzystają z tego samego kształtu bazowego z zaaplikowanym przycinaniem.

Rys. 4

Rys. 5

Rys. 6

Kod źródłowy kształtu bazowego z przycinaniem.

<svg width="320" height="400" xmlns="http://www.w3.org/2000/svg"
      style="background:#232730;">
  <defs>
  	<clipPath id="c">
  	 <circle cx="160" cy="230" r="150" fill="#ff004c" />
    </clipPath>
  </defs>
  <circle cx="160" cy="230" r="150" fill="#49a7fe" />
  <rect x="130" y="60" width="60" height="30" fill="#f9bc40" />
  <circle cx="160" cy="40" r="25" fill="none"
      stroke="#f9bc40" stroke-width="5" />
  <g clip-path="url(#c)">
<!-- miejsce na elementy ozdobne -->
  </g>
</svg>

Kod źródłowy rysunku 3.

<svg width="320" height="400" xmlns="http://www.w3.org/2000/svg"
      style="background:#232730;">
  <defs>
  	<clipPath id="c">
  	 <circle cx="160" cy="230" r="150" fill="#ff004c" />
    </clipPath>
  </defs>
  <circle cx="160" cy="230" r="150" fill="#ff004c" />
  <rect x="130" y="60" width="60" height="30" fill="#f9bc40" />
  <circle cx="160" cy="40" r="25" fill="none"
      stroke="#f9bc40" stroke-width="5" />
  <line x1="0" y1="230" x2="320" y2="230"
      stroke="#4db4a3" stroke-width="80"
    clip-path="url(#c)" />
  <circle cx="60" cy="230" r="25" fill="#a1d8ce" />
  <circle cx="160" cy="230" r="25" fill="#a1d8ce" />
  <circle cx="260" cy="230" r="25" fill="#a1d8ce" />
</svg>

Kod źródłowy rysunku 4.

<svg width="320" height="400" xmlns="http://www.w3.org/2000/svg"
  style="background:#232730;">
  <defs>
  	<clipPath id="c">
  	 <circle cx="160" cy="230" r="150" fill="#ff004c" />
    </clipPath>
  </defs>
  <circle cx="160" cy="230" r="150" fill="#8d43ad" />
  <rect x="130" y="60" width="60" height="30" fill="#f9bc40" />
  <circle cx="160" cy="40" r="25" fill="none"
    stroke="#f9bc40" stroke-width="5" />
  <polyline points="0,280 80,180 160,280 240,180 320,280"
    fill="none" stroke="#ffb3cb" stroke-linejoin="round"
    stroke-width="60" clip-path="url(#c)" />
</svg>

Kod źródłowy rysunku 5.

<svg width="320" height="400" xmlns="http://www.w3.org/2000/svg"
  style="background:#232730;">
  <defs>
  	<clipPath id="c">
  	 <circle cx="160" cy="230" r="150" fill="#ff004c" />
    </clipPath>
    <polyline id="pl" points="0,280 80,180 160,280 240,180 320,280"
    fill="none" stroke-linejoin="round" />
  </defs>
  <circle cx="160" cy="230" r="150" fill="#49a7fe" />
  <rect x="130" y="60" width="60" height="30" fill="#f9bc40" />
  <circle cx="160" cy="40" r="25" fill="none"
    stroke="#f9bc40" stroke-width="5" />
  <g clip-path="url(#c)">
  <use href="#pl" stroke="#fdf808" stroke-width="20" />
  <use href="#pl" stroke="#fffecc" stroke-width="5"
    transform="translate(0,30)" />
  <use href="#pl" stroke="#fffecc" stroke-width="5"
    transform="translate(0,-30)" />
  <use href="#pl" stroke="#fff" stroke-width="5"
    transform="translate(0,50)" />
  <use href="#pl" stroke="#fff" stroke-width="5"
    transform="translate(0,-50)" />
  </g>
</svg>

Kod źródłowy rysunku 6.

<svg width="320" height="400" xmlns="http://www.w3.org/2000/svg"
	style="background:#232730;">
  <circle cx="160" cy="230" r="150" fill="#244f1c" />
  <rect x="130" y="60" width="60" height="30" fill="#f9bc40" />
  <circle cx="160" cy="40" r="25" fill="none"
  	stroke="#f9bc40" stroke-width="5" />
  <path d="M160,130 183,197.64 255.11,199.09
  	198.04,242.36 218.78,310.9 160,270 101.22,310.9 
  	121.96,242.36 64.89,199.1 136.49,197.64"
  fill="#7c874a" />
</svg>
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