Evento #5

Clicca ripetutamente sui 2 cerchi per intervenire sul loro bordo. JavaScript può rimuovere un attributo tramite removeAttribute(“…”).

Trasformazioni #3

Stirare di un certo angolo alfa rispetto all’asse x … … y … o tutti e due… ma il risultato dipende dall’ordine! …

Trasformazioni #2

Rotazione Ruotare di un certo angolo alfa, con (0,0) punto fisso … Rotazione di 30 gradi in senso orario Rispetto a un punto Ruotare di un certo angolo alfa rispetto a (cx,cy) … Rotazione di 30 gradi in senso orario rispetto al primo vertice del rettangolo Rotazione di 30 gradi in senso orario rispetto al … Leggi tutto

Trasformazioni #1

Si può agire sugli elementi con delle trasformazioni geometriche Traslazione Traslare rispetto agli assi di dx e dy … ==Esempi== Un rettangolo traslato a destra di 350 … in basso di 200 … in basso a destra… Scalatura Scalare le dimensioni rispetto agli assi di dx e dy. In realtà scala anche x, y, stroke-width, … Leggi tutto

Linee

L’elemento path comprende i comportamenti di polyline e polygon e aggiunge ulteriori funzionalità tramite delle etichette: M H h V v Z L’attributo d contiene una sequenza di coordinate precedute da etichette M, indica il punto iniziale da cui partire L, linea verso il punto successivo Un’onda quadra blu / Altre etichette… H, nuova coordinata … Leggi tutto

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,