Category Archives: SVG

Testi #1

Da revisionare: problemi con Firefox, apri il collegamento con Safari o Chrome


Un testo in una certa posizione x, y con un certo stile



Testi #4

Da revisionare: problemi con Firefox, apri il collegamento con Safari o Chrome


Con l’uso di pedici e apici si possono comporre formule…
Per realizzare pedici e apici è necessario combinare

  • baseline-shift=”sub/super”, sposta verso l’alto o verso il basso
  • font-size=”…”, per ridurre la dimensione

Per realizzare formule semplici è necessario combinare testo normale e pedici/apici con tfont (che fa scorrere automaticamente i frammenti di testo)



Testi #3

Da revisionare: problemi con Firefox, apri il collegamento con Safari o Chrome


Si possono comporre dei testi consecutivi e multilinea utilizzando elementi tspan all’interno di text e posizionandoli in modo sia assoluto che relativo, tramite dx e dy

La seconda scritta, rossa, è posizionata a destra della prima, di default, e 25px sotto, tramite dy

La quinta scritta, verde, è posizionata in modo assoluto, tramite x, e in modo relativo, tramite dy



Testi #2

Da revisionare: problemi con Firefox, apri il collegamento con Safari o Chrome


Un testo in una certa posizione (x,y)

Il testo “Prova SVG!” di colore blue, dimensione 25, alla posizione (50,50)

… con bordo nero

… in grassetto

… in corsivo

… sottolineato

… sbarrato

… con font della famiglia cursive

sans serif

monospace

… con spaziatura tra le parole 20

… con spaziatura tra le lettere 20

Tutto



Circles #2

Tre cerchi con il riempimento semitrasparente che cambia al passaggio del mouse




Events #1

Ai due cerchi, disegnati in SVG, viene associato un ascoltatore del tasto del mouse



Polygons #3

Due poligoni, immersi in una pagina HTML.
La stella è sensibile al passaggio del mouse perché possiede l’attributo attivo=1



Polygons #2

Due poligoni, immersi in una pagina HTML, e sensibili al passaggio del mouse



Evento #15

Clicca sull’area bianca e genera un cerchio con colore e raggio casuale.
JavaScript può acquisire la posizione del mouse con evt.clientX, evt.clientY



Evento #12

Clicca sui 2 cerchi per sostituirli con quadrati.
JavaScript può sostituire un elemento con un altro tramite replaceChild().