Rettangolo di SVG

Per capire come questo funziona, copiare il seguente codice nel Notepad e conservare la lima come �rect.svg�. Disporre la seguente lima nel vostro indice di fotoricettore:

Esempio di usando la modifica del <rect>

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="400" height="200"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

Spiegazione del codice:

Gli attributi di altezza e di larghezza dell'elemento del rect definiscono la larghezza e l'altezza del rettangolo
L'attributo di stile definisce le propriet� di CSS
La propriet� del materiale di riempimento di CSS definisce il colore del materiale di riempimento del rettangolo (un valore di rgb, un nome di colore, o un valore esadecimale)
La propriet� di colpo-larghezza di CSS definisce la larghezza del bordo del rettangolo
La propriet� del colpo di CSS definisce il colore del bordo del rettangolo

Guardiamo un altro esempio che contiene alcuni nuovi attributi:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="350" height="350"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

Spiegazione del codice:

L'attributo di x definisce la posizione di sinistra del rettangolo (per esempio il x= " 0 " dispone i pixel di rettangolo 0 dalla parte di sinistra del browser)
L'attributo di y definisce la posizione superiore del rettangolo (per esempio il y= " 0 " dispone i pixel di rettangolo 0 dalla parte superiore del browser)
La propriet� di riemp-opacit� di CSS definisce l'opacit� di colore del materiale di riempimento (gamma legale: 0 - 1)
La propriet� di colpo-opacit� di CSS definisce l'opacit� di colore del colpo (gamma legale: 0 - 1)

Il seguente codice definisce l'opacit� per l'elemento intero:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="350" height="350"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

Spiegazione del codice:

La propriet� di opacit� di CSS definisce il valore di opacit� per il tutto l'elemento (gamma legale: 0 - 1)

L'ultimo esempio generer� un rettangolo con i angoli arrotondati:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="350"
height="100" style="fill:blue;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

Spiegazione del codice:

Il rx e gli attributi del rel� arrotonda i angoli del rettangolo