Prostokąt
<rect height="128" width="276" y="33" x="46" stroke-width="5" stroke="#000000" fill="#FF0000"/>
- rect definiuje kształt figury, tutaj prostokąt
- height określa wysokość prostokąta, tutaj 128 pikseli
- width określa szerokość prostokąta, tutaj 276 pikseli
- y określa położenie prostokąta od góry, tutaj 33 piksele
- x określa położenie prostokąta od lewego marginesu, tutaj 46 pikseli
- stroke-width określa szerokość obramowania, tutaj 5 pikseli
- stroke określa kolor obramowania, tutaj 000000 (czarny)
- fill określa kolor wypełnienia prostokąta, tutaj FF0000 (czerwony)
Gdyby szerokość i wysokość prostokąta miały tę samą wartość, utworzylibyśmy naturalnie kwadrat.
W definicji mogą się znaleźć polecenia o przykładowych wartościach ry="20" rx="20", które definiują zaokrąglenie rogów. Pierwsze określa, na jakiej długości zaokrąglany jest pionowy brzeg figury, drugie - poziomy.
Gdyby wartości były różne, zaokrąglenie nie będzie już regularne, np. dla ry="20" rx="50":
Gdybyśmy użyli w definicji dodatkowych poleceń fill-opacity="0.45" stroke-opacity="0.45", uzyskalibyśmy stopień przezroczystości wypełnienia i obramowania (z przedziału od 0 do 1).
Atrybuty opisujące wygląd można grupować w ramach jednego polecenia stylu, np. zamiast
stroke-width="8" stroke="#000000" fill="#FF0000" fill-opacity="0.45" stroke-opacity="0.45"
możemy napisać
style="fill:red; stroke:black; stroke-width:8; fill-opacity:0.45; stroke-opacity:0.45"
Okrąg
<circle r="84" cy="104" cx="108" stroke-width="5" stroke="#000000" fill="#ff7f00"/>
- circle definiuje kształt figury, tutaj okrąg
- r określa promień okręgu, tutaj 84 piksele
- cy wyznacza położenie współrzędnej y środka okręgu, tutaj 104 piksele od góry
- cx wyznacza położenie współrzędnej x środka okręgu, tutaj 108 pikseli od lewego marginesu
Naturalnie możemy się posłuzyć poleceniami fill, stroke i stroke-width, które mają to samo znaczenie, co w przypadku prostokąta. Możliwe jest też użycie opacity, czyli przezroczystości.
Elipsa
<ellipse fill="#4cff00" stroke="#007fff" stroke-width="5" cx="200" cy="70" rx="170" ry="50"/>
- ellipse definiuje kształt figury, tutaj elipsę
- cx wyznacza położenie współrzędnej x środka elipsy, tutaj 200 pikseli od lewego marginesu
- cy wyznacza położenie współrzędnej y środka elipsy, tutaj 70 pikseli od góry
- rx określa poziomy promień elipsy, tutaj 170 pikseli
- ry określa pionowy promień elipsy, tutaj 50 pikseli
Tu także możemy się posłuzyć poleceniami fill, stroke i stroke-width, które mają to samo znaczenie, co w przypadku prostokąta. Możliwe jest też użycie opacity, czyli przezroczystości.
Odcinek
<line y1="26" x1="39" y2="130" x2="451" stroke-width="5" stroke="#7f3f00" fill="none"/>
- line definiuje kształt figury, tutaj odcinek
- x1 wyznacza położenie współrzędnej x początku odcinka, tutaj 39 pikseli od lewego marginesu
- y1 wyznacza położenie współrzędnej y początku odcinka, tutaj 26 pikseli od góry
- x2 wyznacza położenie współrzędnej x końca odcinka, tutaj 451 pikseli od lewego marginesu
- y2 wyznacza położenie współrzędnej y końca odcinka, tutaj 130 pikseli od góry
Tu również możemy się posłuzyć poleceniami fill, stroke i stroke-width, które mają to samo znaczenie, co w przypadku prostokąta. Możliwe jest też użycie opacity, czyli przezroczystości.
Wielokąt
Ośmiokąt
<polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" style="stroke:black; fill:#cc3333; stroke-width: 5;"/>
- polygon definiuje kształt figury, tutaj wielokąt
- points wprowadza punkty wierzchołkowe figury
- x1,y1 wyznacza położenie pierwszego wierzchołka wielokąta
- x2,y2 wyznacza położenie drugiego wierzchołka wielokąta (zgodnie z kierunkiem wskazówek zegara)
- ...
W analogiczny sposób działają polecenia fill, stroke, stroke-width czy opacity.
Trójkąt
<polygon points="100,10 250,190 130,210" style="fill:lime;stroke:purple;stroke-width:2"/>
Linia łamana
<polyline points="10,40 50,30 60,50 80,120 120,140 200,100" style="fill:none;stroke:brown;stroke-width:5" />
- polyline definiuje kształt figury, tutaj linię łamaną
- points wprowadza punkty węzłowe figury
- x1,y1 wyznacza położenie pierwszego węzła
- x2,y2 wyznacza położenie drugiego węzła
- ...
W analogiczny sposób działają polecenia fill, stroke, stroke-width czy opacity.
Zwróćmy teraz uwagę na kolor wypełnienia. Gdy polecenie fill ma wartość taką samą, jak tło strony (np. białe) lub wartość none, widzimy linię łamaną. Gdyby natomiast został wprowadzony inny kolor, np. khaki, linia będzie wyświetlana na podlewie.
Od razu zauważmy też różnicę między efektem działania poleceń polygon i polyline, choć wykorzystują te same punkty. Poniższe polecenie polygon wyświetla też automatycznie linię łączącą ostatni punkt z pierwszym (zamyka figurę), czego nie powoduje polecenie polyline.
