SVG - podstawowe kształty

czwartek, 03 maj 2012 10:44 pwimmer
Drukuj

Prostokąt

<rect height="128" width="276" y="33" x="46" 
stroke-width="5" stroke="#000000" fill="#FF0000"/>

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"/>

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"/>

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"/>

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;"/>

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" />

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.