piątek,
SVG: STOP SPAM
Jak widać na tytułowej grafice, projekt inspirowany jest znakiem drogowym o kształcie ośmiokąta. Na końcu materiału znajdziesz kod źródłowy omawianej grafiki. Ilustrujące przykład rysunki są w formacie SVG, po pobraniu można analizować także ich kod.
SVG to format grafiki wektorowej i obraz w nim zapisany można bez problemu skalować, jednak na początku projektu należy określić wymiary pierwotne. Dla grafiki przyjęto wymiary 400 na 400 pikseli, na jej środku mieszczono ośmiokąt foremny. Długość promienia okręgu opisanego na ośmiokącie wynosi 160 pikseli, a jego środek znajduje się dokładnie na środku grafiki i ma współrzędne (200,200). W formacie SVG ośmiokąt można uzyskać na kilka sposobów, jednak w żadnym przypadku nie obędzie się bez dodatkowych obliczeń. W prezentowanym przykładzie wykorzystano element <polygon>, definiowane za jego pomocą kształty muszą mieć określone współrzędne. W formacie SVG współrzędne liczone są o lewego górnego rogu grafiki.
Rozwiązaniem problemu jest wyznaczenie współrzędnych ośmiu punktów stanowiących wierzchołki ośmiokąta i położonych na okręgu na nim opisanym (rys. 1). Wykorzystując równanie parametryczne okręgu, wartości współrzędnych punktów położonych na okręgu można obliczyć za pomocą formuł: x = r * cos(a) oraz y = r * sin(a). Parametr r to promień okręgu. Kolejne wierzchołki ośmiokąta dzielą okrąg na osiem równych części, dlatego kąt a będzie przyjmował wartości będące wielokrotnościami 45° (360deg/8): 0°, 45°, 90°, 135°, 180°, 225°, 270° i 315°.
Niestety zaprezentowane wzory stanowią jedynie punkt wyjściowy i muszą być dodatkowo zmodyfikowane. Po skorzystaniu z nich, otrzymany ośmiokąt znajduje się w niewłaściwym miejscu (rys. 2), dzieje się tak dlatego, że formuły przyjmują jako środek okręgu punkt o współrzędnych (0,0). Po uwzględnieniu współrzędnych środka okręgu wzory wyglądają następująco: x = cx + r * cos(a) oraz y = cy + r * sin(a), gdzie cx i cy to współrzędne środka okręgu.
Grafika uzyskana po ponownym przeliczeniu współrzędnych (rys. 3) jest dużo bliższa założeniom projektu, jednak figura jest trochę obrócona. Aby zmodyfikować wzór, należy ustalić niepożądany kąt obrotu, można skorzystać z własności ośmiokąta foremnego: (360deg - 2*135°)/4 = 22,5° co jest równe 45°/2, czyli połowie odległości kątowej wyznaczanych punktów.
Po kolejnej poprawce i uogólnieniu ostatecznie wzory wyglądają następująco:
- x = cx + r * cos(360/(k*2) + 360*i/k),
- y = cy + r * sin(360/(k*2) + 360*i/k),
gdzie k to ilość wierzchołków, i – liczony od zera numer wierzchołka (dla pierwszego i = 0).
Rys. 1
Rys. 2
Rys. 3
Rys. 4
Projekt
W projekcie zaokrąglono wartości współrzędnych, aby uniknąć dołączania do cytowanego kodu źródłowego wartości o np. ośmiu znakach po przecinku. Ten kompromis znacznie zwiększa czytelność przykładu.
Po obliczeniach uzyskano współrzędne wierzchołków ośmiokąta: (348,260), (263,347), (140,348), (53,263), (52,140), (137,53), (260,52), (347,137). Figurę utworzono za pomocą elementu <polygon> (wielokąt), którego atrybut points służy do zapisania współrzędnych. Kształtowi nadano czerwone wypełnienie (fill="red"). W kolejnym kroku przeniesiono deklarację ośmiokąta do znacznika <defs> i nadano mu atrybut id, w formacie SVG zawartość znacznika <defs> nie jest bezpośrednio renderowana, do zapisanych tam obiektów można się odwoływać. Wykonany wcześniej wzorzec wstawiono do grafiki za pomocą znacznika <use> (<use href="#o" fill="red" />).
Aby uzyskać białą obwódkę, ponownie wstawiono wcześniejszy wzorzec do grafiki, nadano duplikatowi białe obramowanie i trochę go zmniejszono (scale(.85)). W formacie SVG element nie jest skalowany względem swojego środka, dlatego dodatkowo duplikat przesunięto we właściwe miejsce (translate(30,30)). Ostatni etap projektu to dodanie napisu. Służy do tego znacznik <text>, którego atrybuty x i y to wartości współrzędnych. Tekst sformatowano za pomocą własności CSS zawartych w znaczniku <style>. Deklaracja „font:bold 60px sans-serif” oznacza, że tekst jest pogrubiony, ma rozmiar 60 pikseli oraz krój bezszeryfowy. Własność „fill” definiuje kolor wypełnienia, „text-anchor” służy do wyrównania względem danego punktu. W drugim znaczniku <text> zastosowano atrybut dy służący do przesunięcia elementu wzdłuż osi Y.
Poniżej znajduje się kod projektu 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="400" height="400" xmlns="http://www.w3.org/2000/svg"
style="background:#357;">
<style>
text {font:bold 60px sans-serif;fill:white;text-anchor: middle;}
</style>
<defs>
<polygon id="o" points="348,260 263,347 140,348 53,263
52,140 137,53 260,52 347,137" />
</defs>
<use href="#o" fill="red" />
<use href="#o" fill="red" stroke="white" stroke-width="12"
transform="translate(30,30) scale(.85)" />
<text x="200" y="200">STOP</text>
<text x="200" y="200" dy="50">SPAM</text>
</svg>Dla przypomnienia:
- w formacie SVG współrzędne liczone są od lewego górnego rogu obrazu;
- rozróżniane są wielkie i małe litery;
- w przypadku błędów składniowych grafika się nie wyświetla;
- brak określenia jednostki przy wymiarach oznacza, że przyjmowane są piksele.
