Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

SVG: Serce

poniedziałek,

SVG: Serce

Tym razem przedstawimy sposób na wykonanie dość ciekawego kształtu, jakim jest symbol serca. Jeśli coś wydaje się niejasne, zerknij do poprzednich odcinków cyklu na temat języka SVG.

Pomysł narysowania serca za pomocą formuł „matematycznych” jest prosty i sprawdza się do odpowiedniego połączenia dwóch kół oraz kwadratu, a następnie wykonania obrotu otrzymanego kształtu. Ideę wykonania grafiki przedstawiono poniżej.

W skład grafiki wchodzą dwa koła (circle) oraz kwadrat (rect). Środki kół znalazły się w połowie boków kwadratu, a ich promień (r=100) wynosi dokładnie połowę boku kwadratu (200/2). Poniżej zamieszczono kod potrzebny do przeprowadzenia pierwszego etapu wykonania grafiki.

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="UTF-8">
	<title>Serce</title>
</head>
<body style="background: #121212;padding:20px;">
<svg width="400" height="350">
	<rect x="100" y="150" width="200" height="200" fill="#a00" />
	<circle cx="200" cy="150" r="100" fill="#a00" />
	<circle cx="300" cy="250" r="100" fill="#a00" />
</svg>
</body>
</html>

W języku SVG obiekty można grupować, służy do tego znacznik <g>. Grupowanie może ułatwić wiele operacji, w przykładzie posłużyło do wykonania jednoczesnego obrotu wszystkich elementów grafiki. Dostępne przekształcenia (atrybut transform) to translacja (przesunięcie), skalowanie, rotacja (obrót) oraz pochylenie. Obrót wykonywany jest na podstawie określonego kąta. W przykładzie rotacja następuje w kierunku przeciwnym do wskazówek zegara, dlatego kąt jest ujemny, a jego dokładna wartość to -45 stopni (-45deg). Pozostałe argumenty funkcji rotate to współrzędne x, y środka obrotu.

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="UTF-8">
	<title>Serce</title>
</head>
<body style="background: #121212;padding:20px;">
<svg width="400" height="350">
	<g transform="rotate(-45,100,250)">
	<rect x="100" y="150" width="200" height="200" fill="#a00" />
	<circle cx="200" cy="150" r="100" fill="#a00" />
	<circle cx="300" cy="250" r="100" fill="#a00" />
	</g>
</svg>
</body>
</html>

Efekt wizualny powyższego kodu:

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