Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

SVG - ścieżka

Email Drukuj PDF

Wyznaczanie skomplikowanej konstrukcyjnie ścieżki jest łatwe, gdy posługujemy się programem do grafiki wektorowej, natomiast może być trudne, gdy zechcemy tworzyć elementy rysunku ręcznie, ingerując bezpośrednio w kod.

Odcinki

Najłatwiej jest zacząć od odcinków, gdyż są one intuicyjnie najprostsze do pojęcia.

Polecenie Parametry Nazwa Opis
M x,y moveto Mx,y (lub Mx y) oznacza ustawienie pióra do rysowania w danym punkcie obszaru, na którym rysujemy (kanwy) - wyznaczamy tu absolutne położenie punktu (współrzędne absolutne). Przykład: M20,20
m x,y moveto mx,y (lub mx y) oznacza przesunięcie pióra do rysowania o x,y pikseli w stosunku do aktualnego położenia - określamy relatywną zmianę położenia. Przykład: m20,20.
H x horizontal lineto Hx to polecenie rysowania poziomej linii od aktualnej pozycji pióra do punktu o współrzędnej x. Przykład: H140 oznacza, że zostanie narysowana linia od bieżącego punktu do punktu o współrzędnej x=140.
h x horizontal lineto hx to polecenie rysowania od aktualnej pozycji pióra poziomej linii o długości x pikseli. Przykład: h120 oznacza, że od bieżącego punktu zostanie namalowana pozioma linia o długości x=120 pikseli. Uwaga: liczby mogą być ujemne, np. h-120, co spowoduje narysowanie odcinka w przeciwnym kierunku niż domyślny (w lewo).
V y vertical lineto Vy to polecenie rysowania pionowej linii od aktualnej pozycji pióra do punktu o współrzędnej y. Przykład: V110 oznacza, że zostanie narysowana pionowa linia od bieżącego punktu do punktu o współrzędnej y=110.
v y vertical lineto vy to polecenie rysowania od aktualnej pozycji pióra pionowej linii o długości y pikseli. Przykład: v90 oznacza, że od bieżącego punktu zostanie narysowana pionowa linia o długości y=90 pikseli.
L x,y lineto Lx,y (lub Lx y) to polecenie narysowania linii od bieżącego punktu do punktu o absolutnych współrzędnych x,y. Przykład: L120,90 spowoduje wykreślenie odcinka od bieżącego punktu do punktu o współrzędnych 120,90.
l x,y lineto lx,y (lub lx y) to polecenie narysowania od danego punktu linii o składowych x,y. Przykład: l100,70 spowoduje wykreślenie linii o składowych x=100 i y=70.

Poniższy rysunek ilustruje sytuacje zaprezentowane w tabeli. Na początku ustawiamy pióro w punkcie (20,20), a potem rysujemy od tego punktu różne odcinki, posługując się wartościami absolutnymi lub względnymi. Współrzędne zaczynają się oczywiście w lewym górnym rogu, od wartości 0,0.

Przykład:

<path d="M20,20 H100 V50 h-50 v50 L120,150"
style="fill:none;stroke:red;stroke-width:3"/>

Procedura rysowania, krok po kroku.

  • Na obszarze rysowania najpierw wykonany został skok do punktu o absolutnych współrzędnych 20,20 (M20,20).
  • W kolejnym kroku został narysowany (H100) poziomy odcinek aż do punktu o współrzędnej x=100.
  • Następny etap to narysowanie (V50) pionowego odcinka do punktu o współrzędnej y=50.
  • W następnym kroku (h-50) został wykreślony w lewo poziomy odcinek o długości 50 pikseli.
  • Kolejny krok to wykreślenie (v50) pionowego odcinka o długości 50 pikseli.
  • Ostatni etap to narysowanie (L120,150) odcinka od bieżącego pozycji pióra do punktu o współrzędnych absolutnych 120,150. 

Jak widzimy w stylach, figura nie ma żadnego wypełnienia (fill:none), czerwony kolor kreski (stroke:red) i grubość kreski 3 piksele (stroke-width:3).

Łuki

Łuki są wycinane z okręgów i elips. Łuk definiowany jest za pomocą następującego polecenia:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
  • rx i ry oznaczają odpowiednio długość promienia x i promienia y elipsy, z której wycinamy łuk.
  • x-axis-rotation to obrót osi x elipsy mierzony w stopniach, w przedziale od -180 do 180 stopni.
  • large-arc-flag oznacza, że albo wyświetlany jest większy (1) albo mniejszy (0) łuk wycięty z elipsy.
  • sweep-flag oznacza, że albo łuk jest wyświetlany powyżej lub na prawo od ścieżki (1), albo też poniżej lub na lewo (0).
  • x y oznaczają współrzędne na ścieżce, gdzie kończy się wyświetlanie łuku.

Aby zrozumieć, jak to w praktyce działa, musimy pokazać to na przykładach.

Dla ułatwienia obejmiemy obszar rysowania obramowaniem, stosując po prostu styl CSS postaci style="border:solid 1px black". Polecenie M10 150 oznacza przeniesienie pióra do punktu 10,150. Z kolei L60 150 oznacza wykreślenie prostej do punktu 60,150. W tym miejscu zaczyna się wykreślanie łuku A, zaś konstrukcję kończymy wykreśleniem odcinka L. W ten sposób zobaczymy zachowanie łuku zależnie od wartości parametrów.

<svg width="400px" height="300px" style="border:solid 1px black" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 150
  L 60 150
  A 80 50 0 1 1 150 150
  L 400 150" 
 stroke="black" fill="khaki" stroke-width="2" fill-opacity="0.4"/>
</svg>

Jak widzimy, większy łuk został wycięty z elipsy o promieniach 80 i 50 i wyświetlony nad ścieżką.

Zmienimy teraz polecenie z A 80 50 0 1 1 150 150 na A 50 80 0 1 1 150 150, a więc elipsa zostanie "postawiona" pionowo.

Tę ostatnią figurę przechylimy teraz najpierw o 30 stopni w prawo, a potem o 100 stopni w prawo, podając definicję A 50 80 30 1 1 150 150, a potem A 50 80 100 1 1 150 150


Kolejna zmiana w stosunku do pierwszego rysunku łuku to wyświetlenie mniejszego łuku wyciętego z elipsy (na pierwszym wykreślony został większy). Zmienimy polecenie z A 80 50 0 1 1 150 150 na A 80 50 0 0 1 150 150.

Następna zmiana w stosunku do pierwszego rysunku łuku to wyświetlenie dużego łuku wyciętego z elipsy nie powyżej (jak na pierwszym), ale poniżej ścieżki. Polecenie A 80 50 0 1 1 150 150 zmienimy na A 80 50 0 1 0 150 150

I wreszcie dochodzimy do ostatniego elementu, czyli punktu, w którym jest ciąg dalszy ścieżki. Jak widać, ta sama elipsa jest inaczej "wcięta" w ścieżkę i zajmuje w niej nie 90, lecz 140 pikseli. Jest w nią bardziej "wtopiona". To skutek zmiany polecenia z A 80 50 0 1 1 150 150 na A 80 50 0 1 1 200 150

c.d.n.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V