Bezier cubica

Con le opportune etichette, l’elemento path permette di realizzare linee curve! C con x1,y1 x2,y2 x,y dal punto attuale, utilizzando x1,y1 come punto di controllo, a x,y utilizzando x2,y2 come punto di controllo. Si può semplificare, dopo il primo C, con S x2,y2 x,y dal punto attuale, utilizzando il simmetrico del precedente come punto di … Leggi tutto

Bezier quadratica

L’etichetta Q e x1 y1 x y dal punto attuale a x y utilizzando x1 y1 come punto di controllo. Si può semplificare, dopo il primo B, con T x,y continua verso x,y, come punto di controllo il riflesso del precedente

Archi

L’etichetta A e rx ry x-axis-rotation large-arc-flag sweep-flag x y rx,ry, raggi dell’ellisse x-axis-rotation, rotazione rispetto alla direzione attuale large-arc-flag, … sweep-flag, … x,y, punto finale Il centro dell’ellisse cx, cy è calcolato automaticamente,

Rectangles #2

I 2 rettangoli in basso hanno gli stessi attributi dei primi due ma hanno subito una traslazione e una scalatura

Rectangles #1

I 3 rettangoli hanno gli stessi attributi x=50, y=50, coordinate del centro width=200, height=100, dimensioni ma il secondo ha rx=25, ry=25 e il terzo subisce una traslazione e una rotazione

Circles #1

L’esempio introduttivo proposto dal Mozilla SVG Project. Tre cerchi con riempimento semitrasparente, fill-opacity=”…”, di colore diverso, fill=”…”, posizionati tramite transform=”translate(…, …)

Line #1

Le linee possono avere diversi stili, stroke-linecap, per le estremità butt round square