Evento #1

Il cerchio blu reagisce al clic del mouse. L’elemento svg contiene uno script e all’elemento circle è associato un evento onclick().

Evento #2

Clicca sul cerchio blu e leggi i valori dei suoi attributi. JavaScript può accedere agli elementi, getElementById(…), e ai loro attributi, getAttribute(…).

Evento #3

Clicca ripetutamente sul cerchio e cambia il suo colore. JavaScript può accedere agli elementi anche in scrittura.

Evento #4

Clicca ripetutamente sui 2 cerchi e cambia il loro colore. JavaScript può accedere agli elementi tramite evt.target.

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