Kurs języka HTML i CSS

Poradnik webmastera

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

SVG - podstawowe kształty

Email Drukuj PDF

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.

 

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