Programiranje - SVG - 2. Jednostavni elementi - 2.1 Pravokutnici (rect)

Ovo je nastavak posta 1. Uvod.

Nakon što smo u uvodu pokazali neke osnovne mogućnosti, pozabavićemo se u ovom dijelu s mogućom sintaksom elementa već spomenutom u uvodu. Riječ je o elementu rect, kojim možemo crtati pravokutnike (eng. rectangle). 


1. jednostavan primjer s najosnovnijim parametrima ("x", "y", "width", "height"):

<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="110" height="60" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Element rect</title>  
<rect x="1" y="1" width="108" height="58" fill="white" stroke="green" />

<rect x="10" y="10" width="90" height="40" /> 

</svg>

Bitna sintaksa u gornjem primjeru je istaknuta crvenom bojom. 
Lijevo se vidi izgled rezultat - da bi se lakše snašli, cijela površina slike je uokvirena - gornji lijevi kut okvira ima koordinatu (0;0), a mjereno odande su varijablama "x" i "y" dane koordinate gornjeg lijevog kuta toga pravokutnika (10;10). Širina i visina pravokutnika je dana varijablama "width" i "height". Kako nije dana nikakva informacija o boji kojom će se ispuniti pravokutnik, uzeta je standardna vrijednost za tu varijablu, a to je crna boja.

2. uvođenje parametra "fill" i definiranje boja

<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="110" height="60" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Element rect</title>
<rect x="1" y="1" width="108" height="58" fill="white" stroke="green" />

<rect x="10" y="10" width="90" height="40" fill="#ff0000" />

</svg>

 Parametar "fill" definira boju kojom je ispunjen pravokutnik - u našem primjeru je to dano u RGB-formatu - RGB format ima uvijek kao prvi znak "#" za heksadecimalni format, a nakon toga dolazi 6 heksadecimalnih brojeva (brojke 0 - 9 i slova "a" do "f"). Po dva slova stoje za svaku od R, G ili B komponenti jedne boje, pri čemu je "R" red=crveno, "G" green=zeleno, "B" blue=plavo. Ova tri heksimalna broja imaju u decimalnom sistemu vrijednost između 0 i 255, čime se definira intenzitet pojedine komponente. Neke vrijednost RGB kombinacija:

000000 = crna
FF0000 = crvena
00FF00 = zelena
0000FF = plava
FFFF00 = žuta
FF00FF = ljubičasta
00FFFF = turkizna
FFFFFF = bijela




Neke boje su već definirane, pa se mogu dati i bez prefiksa "#" - ukoliko definiramo:

fill="white"

naš pravokutnik će biti ispunjen bijelom bojom. Moguće su i neke druge vrijednosti, ali jednu punu listu definiranih boja moraćete potražiti negdje drugdje. Ukoliko se definira:

fill="none"

pravokutnik neće biti nacrtan (tj. biće providan). Oko njega se još uvijek može, kako ćemo kasnije vidjeti, nacrtati okvir, kako bi ga se ocrtalo.


3. Parametri "stroke" i "stroke-width"

<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="110" height="60" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Element rect</title>
<rect x="1" y="1" width="108" height="58" fill="white" stroke="green" />

<rect x="10" y="10" width="90" height="40" fill="red" stroke="blue" stroke-width="4" /> 

</svg>

Ova dva parametra stvaraju okvir oko pravokutnika. Parametar "stroke" označava boju okvira, a "stroke-width" njegovu debljinu u pikselima. Sredina okvira je na rubu prethodno definiranog pravokutnika - u našem slučaju, ako je "stroke-width=4", to znači da su 2 piksela izvan ruba pravokutnika, a 2 piksela ulazi u pravokutnik.


4.Uvođenje parametara "rx" i "ry"

<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="110" height="60" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Element rect</title>
<rect x="1" y="1" width="108" height="58" fill="white" stroke="green" />

<rect x="10" y="10" width="90" height="40" fill="red" stroke="blue" stroke-width="4" rx="30" ry="10" /> 

</svg>

S parametrima "rx" i "ry" možemo napraviti zaobljene rubove na pravokutnicima. Ukoliko su definirana oba parametra i imaju različite vrijednosti, zaobljenje će imati oblik dijela elipse; ukoliko je definiran samo jedan od ta dva parametra, zaobljenje će biti kružno.