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:
