KATEGORIA:

SVG – linia, trójkąt i wielokąt

svg

CO TO JEST SVG?

Co to jest svg? Po co się go używa? Jakie ma zalety? O tym można przeczytać w moim poprzednim artykule: SVG – koło, elipsa, prostokąt. Teraz przejdziemy do instrukcji rysowania linii, trójkąta i wielokątów.

JAK NARYSOWAĆ LINIĘ UŻYWAJĄC SVG?

Aby narysować linię należy skorzystać ze znacznika svg oraz line. Poniżej znajduje się kod wraz z omówieniem.

<svg height="300" width="500" style="border: 1px solid black;">
  <line x1="0" y1="0" x2="300" y2="200" style="stroke:green;stroke-width:6" />
</svg>

line svg

Na początku określamy wysokość i szerokość elementu svg, w którym umieścimy linię. style="border..."dodałam żeby wyróżnić element svg – nie jest to konieczne.

W znaczniku line znajdują się 4 atrybuty:

  • x1 – oznacza miejsce, w którym zacznie się linia na osi x. W tym przypadku jest to 0, więc linia zacznie się w lewym górnym rogu elementu svg.
  • y1 – oznacza miejsce, w którym zacznie się linia na osi y. Również jest to 0, więc początek linii pozostaje w tym samym miejscu: w lewym górnym rogu.
  • x2 – położenie końca linii na osi x. Koniec linii ma w tym przypadku być odsunięty od lewego górnego rogu o 300 px.
  • y2 – położenie końca linii na osi y. Koniec linii ma być odsunięty od górnej krawędzi elementu svg o 200 px.

PRZYKŁAD 2

svg line minus

<svg height="300" width="500" style="border: 1px solid black">
  <line x1="0" y1="60" x2="300" y2="-10" style="stroke:green;stroke-width:6" />
</svg>

W tym przypadku dodany został minus w miejscu zakończenia linii na osi y. Linia kończy się ponad górną granicą elementu svg, czyli ponad punktem 0 na osi y.

PRZYKŁAD 3

line reverse

<svg height="300" width="500" style="border: 1px solid black">
  <line x1="100" y1="200" x2="20" y2="50" style="stroke:green;stroke-width:6" />
</svg>

Tutaj widzimy linię w drugą stronę. Jej długość i położenie zależy od umiejscowienia punktów.

JAK NARYSOWAĆ TRÓJKĄT UŻYWAJĄC SVG?

Poniżej znajduje się kod wraz z omówieniem.
triangle

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:orange;" />
</svg>

Po określeniu wysokości i szerokości elementu svg, należy wpisać współrzędne trzech kątów trójkąta. points="200,10 250,190 160,210" – ten kod odczytujemy następująco:

  1. 200,10 – współrzędne pierwszego punktu. Na osi x: 200 px, na osi y: 10 px.
  2. 250,190 – współrzędne drugiego punktu (LICZYMY W PRAWO). Na osi x: 250 px, na osi y: 190 px.
  3. 160,210 – współrzędne trzeciego punktu. Na osi x: 160 px, na osi y: 210 px.

JAK NARYSOWAĆ WIELOKĄT UŻYWAJĄC SVG?

Wielokąty rysujemy tak samo jak trójkąty. Dodajemy tylko następne punkty. Zamiast trzech, możemy ich dodać nieskończenie wiele. Należy pamiętać, że liczymy w prawo.

Poniżej przykład z kodem.

cross

<svg height="250" width="500">
  	<polygon points="200,10 250,10 250,50 300,50 300,90 250,90 250,130 200,130 200,90 150,90 150,50 200,50" style="fill:orange;stroke:purple;stroke-width:1" />
</svg>

Więcej na temat SVG w artykule: SVG – koło, elipsa, prostokąt.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *