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ł: Sklep Microsoft

Sklep Microsoft

Artykuł: SVG: Święty Mikołaj

SVG: Święty Mikołaj

Artykuł: Ralph Baer

Ralph Baer

Artykuł: SVG: Ikona nadajnika

SVG: Ikona nadajnika

Artykuł: Encyklopedia Britannica

Encyklopedia Britannica

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły