Linea
Un segmento con estremi x1, y1 e x2, y2
|
1 |
<line x1="..." y1="..." x2="..." y2="..." /> |
Un tratto blu, da (50,50) a (300,100)
|
1 |
<line x1="50" y1="50" x2="300" y2="100" style="stroke:blue" /> |
Un tratto blu, di spessore 10, da (50,50) a (300,100)
|
1 |
<line x1="50" y1="50" x2="300" y2="100" style="stroke:blue; stroke-width:10" /> |
Rettangolo
Un rettangolo dati x, y, il vertice in alto a sinistra, width, height, le dimensioni (orizzontale e verticale)
|
1 |
<rect x="..." y="..." width="..." height="..." /> |
Un rettangolo blu, da (50,50), con dimensioni 200 e 100
|
1 |
<rect x="50" y="50" width="200" height="100" style="fill:blue" /> |
Un quadrato blu, da (50,50), con dimensioni 100 e 100
|
1 |
<rect x="50" y="50" width="100" height="100" style="fill:blue" /> |
Un rettangolo blu, con bordo nero di spessore 5, da (50,50) con dimensioni 200 e 100
|
1 |
<rect x="50" y="50" width="200" height="100" style="stroke:black; stroke-width:5; fill:blue" /> |
I parametri rx ry permettono di specificare il raggio di curvatura da utilizzare nel disegnare i vertici del rettangolo
Un rettangolo … con gli angoli smussati
|
1 |
<rect x="50" y="50" width="200" height="100" rx="50" ry="50" style="stroke:black; stroke-width:5; fill:blue"/> |
Tutte
Tutte le forme elementari (cambiando opportunamente le posizioni…)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" ?> <svg xmlns = "http://www.w3.org/2000/svg"> <line x1="50" y1="50" x2="250" y2="100" style="stroke:blue"/> <line x1="300" y1="50" x2="500" y2="100" style="stroke:blue; stroke-width:5"/> <rect x="50" y="150" width="200" height="100" style="fill:blue"/> <rect x="300" y="150" width="100" height="100" style="fill:blue"/> <rect x="50" y="300" width="200" height="100" style="stroke:black; stroke-width:5; fill:blue"/> <rect x="300" y="300" width="200" height="100" rx="50" ry="50" style="stroke:black; stroke-width:5; fill:blue"/> </svg> |