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>
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 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
<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.
<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:
200,10
– współrzędne pierwszego punktu. Na osi x: 200 px, na osi y: 10 px.250,190
– współrzędne drugiego punktu (LICZYMY W PRAWO). Na osi x: 250 px, na osi y: 190 px.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.
<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.