SVG

Le tre ellissi hanno gli stessi attributi cx=150, cy=100, coordinate del centro rx=100, raggio orizzontale ma la seconda ha ry=25, raggio verticale e la terza subisce una traslazione e una rotazione

Da revisionare Estremi M x,y indica il nuovo punto da cui partire Z x,y collega l’ultimo punto al primo Linee L x,y linea verso il punto successivo H x nuova coordinata orizzontale V y nuova coordinata verticale Bezier cubica C x1,y1 x2,y2 x,y dal punto attuale, utilizzando x1,y1 come punto di controllo, a x,y utilizzando … Leggi tutto

Quando diversi elementi condividono degli attributi è possibile dichiararli una volta per tutti. L’elemento g si comporta come un raccoglitore/aggregatore di altri elementi. Gli attributi di g diventano attributi di tutti gli elementi figli. … … … Le due figure condividono il bordo blu di spessore 5 e l’interno giallo Raggruppamenti annidati Si possono annidare … Leggi tutto

Polilinea Un elemento polyline è utilizzato per disegnare una line spezzata. La spezzata è descritta dall’attributo d che contiene una sequenza di punti da collegare. Ogni punto è descritto da una coppia x, y (ascissa,ordinata). Il colore di riempimento, fill, di default è nero, quindi è necessario escluderlo con fill:none. Un tratto blu, di spessore … Leggi tutto

L’elemento defs è un contenitore di elementi con un nome. Il nome viene assegnato come attributo id id=”nome” Gli elementi dichiarati all’interno di defs potranno essere richiamati tramite il loro nome… Esempio Definizione di due elementi un cerchio grande, blu un cerchio piccolo, rosso e successivo utilizzo… cerchio blu cerchio rosso sovrapposto cerchio blu traslato … Leggi tutto

La definizione di un gradiente, radialGradient, si basa su una sequenza di elementi figli, stop offset=0%, il colore più esterno … offset=100%, … interno Nota: l’elemento radialGradient possiede altri parametri…

La definizione di un gradiente, linearGradient, si basa su una sequenza di elementi figli, stop, ciascuno con gli attributi offset=”…%”, il punto di applicazione stop-color=”…”, il colore in quel punto Nota: l’elemento linearGradient possiede altri parametri…

Cerchio Un cerchio con centro in cx, cy e raggio r Un cerchio blu, con centro in (150,150) e raggio 100 Un cerchio … con bordo nero di spessore 3 Ellisse Un’ellisse con centro in cx, cy e raggi rx e ry Un’ellisse rossa, con bordo nero di spessore 3, e raggi uguali Un’ellisse orizzontale … Leggi tutto

Linea Un segmento con estremi x1, y1 e x2, y2 Un tratto blu, da (50,50) a (300,100) Un tratto blu, di spessore 10, da (50,50) a (300,100) Rettangolo Un rettangolo dati x, y, il vertice in alto a sinistra, width, height, le dimensioni (orizzontale e verticale) Un rettangolo blu, da (50,50), con dimensioni 200 e … Leggi tutto

Attributo gestore da aggiungere all’elemento <elemento gestore=”funzione(…)”>…</elemento> per far eseguire la funzione corrispondente, eventualmente dotata di parametri onclick onmousemove onmouseover onmouseout onmousedown onload evt evt.target evt.clientX evt.clientY Metodi per il documento document.metodo(…) rootElement getElementById(“…”) createElement(“…”), createElementNS(“…”), appendChild(…) removeChild(…) replaceChild(…, …) Metodi per gli elementi elemento.metodo(…) getAttribute(“…”) setAttribute(“…”, “…”) hasAttribute(“…”) removeAttribute(“…”) addEventListener(“…”, funzione, false) Restituiscono un … Leggi tutto