SVG - MaurizioMaffi.it

Transcript

Università degli Studi di Urbino "Carlo Bo"
Linguaggi ed Applicazioni mul1mediali Vectorial Graphics:
03.04- SVG (Scalable Vector Graphics)
SVG (Scalable Vector Graphics) Maurizio Maffi ISTI Informa1on Science and Technology Ins1tute SVG (Scalable Vector Graphics) è un linguaggio bidimesionale di grafica veEoriale basato su XML sviluppato dal W3C  
Testuale È possibile creare e modificare un file in formato SVG, con un semplice editor di testo  
Ve,oriale: è possibile scalare e zoomare per adaEare l'immagine in formato SVG, senza perdere qualità  
Aperto: non è un formato proprietario  
Basato su XML : questo permeEe di u1lizzare per lo sviluppo di applicazioni SVG, tan1 strumen1 di sviluppo già disponibili per XML  
Intera8vo: aEraverso un linguaggio di scrip1ng può rendere l'immagine in formato SVG interaQva  
Dinamico:è possibile creare animazioni aEraverso l'uso del linguaggio d'animazione SMIL <?xml version="1.0" encoding="iso-8859-1"
standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//Dtd SVG
1.1//EN"
http://www.w3.org/Graphics/SVG/1.1/Dtd/svg11.dtd>
<svg width="300" height="200" version="1.1" xmlns=
http://www.w3.org/TR/SVG/>
<text x="10" y="100" style="fill:red;fontfamily:times;font-size:18">Primo esempio di SVG</text>
</svg> <?xml version="1.0" encoding="iso-8859-1" standalone="no"?> Questa linea è l'istruzione che dice che il file in ques1one è un file XML conforme alla versione 1.0.
<!DOCTYPE svg PUBLIC "-//W3C//Dtd SVG 1.1//EN"
http://www.w3.org/Graphics/SVG/1.1/Dtd/svg11.dtd>
Dichiarazione del 1po di documento. U1lizzando questo comando si informa che il programma mostrerà un’immagine SVG, e che il nostro file è stato scriEo seguendo le regole indicate nella versione 1.1 del linguaggio <svg width="300" height="200" version="1.1" xmlns= http://www.w3.org/
TR/SVG/>
Come con il tag <html> per le pagine web che contengono tuQ gli elemen1 della pagina, il tag <svg> è il tag che con1ene tuQ gli elemen1 grafici della nostra immagine. È per questo che è l'elemento radice (root) del linguaggio del documento width e height: indicano le dimensioni dell’immagine (Ex: 300x200) Version : indica la versione SVG che si sta u1lizzando Xmlns: Indica lo spazio dei nomi a cui fa riferimento il tag del file SVG. In generale, la dichiarazione del namespace in un documento XML, che indica un tag di lingua vengono u1lizza1 all'interno del file. Nel nostro caso abbiamo dichiarato che tuQ i tag e i loro aEribu1 appartengono alla sintassi di SVG <text x="10" y="100" style="fill:red;fontfamily:times;font-size:18">Primo esempio di SVG</text>
dichiarazione di un elemento grafico , nel nostro esempio: un testo ATTRIBUTI X Y La posizione del testo dentro l'immagine è specificata da X e Y ATTRIBUTO STYLE colore, il caraEere di scriEura e le sue dimensioni sono indicate dall’aEributo style. Un’immagine SVG può essere inserita all’interno di un file HTML nel seguente modo: <object> <object> è usato in sos1tuzione del tag <img> <object width="300" height="200" data="primo-esempio.svg"
type="image/xml+svg“>
hello world
</object>
* Il testo HELLO WORLD viene mostrato nel caso in cui il browser non riesca a caricare l’immagine Alcuni browser non interpretano correEamente tag <object>, preferendo invece il tag <embed> . Quindi, in questo caso, il nostro esempio diventa <embed src="primo-esempio.svg" width="300" height="200"
type="image/xml+svg">
Scaricate il plugin SVG per visualizzare l'immagine
</embed>
SVG fornisce un'area reEangolare di dimensione finita con cui disegnare la nostra immagine chiamato ViewPort <svg width="300" height="200" version="1.1"
xmlns=http://www.w3.org/2000/svg> Qui abbiamo definito una finestra di dimensioni 300x200 pixel con il quale progeEare la nostra grafica. In formato SVG, tuEavia, è possibile u1lizzare le unità di misura differente a seconda delle vostre esigenze. Ex: mm, cm, px, % …… La grafica è collocata all'interno dello spazio di design specificando le
coordinate x e y relative alle coordinate di SVG
B(300,0)
A(0,0)
C(0,200)
D(300,200)
•  PUNTO A individua l'origine del nostro sistema di riferimento e coordinate x = 0, y = 0
•  PUNTO B identifica invece l'angolo di estrema destra in alto della nostra immagine e
ha coordinate x = 300, y = 0
•  PUNTO C indica l'angolo in basso a sinistra e le sue coordinate sono x = 0, y = 200
•  PUNTO D indica l'angolo in basso a destra e le sue coordinate sono x = 300 y = 200
Le principali figure geometriche supportate dal linguaggio SVG sono:   Linee   Polilinee   Cerchi   Pligoni   ReEangoli   Ellissi Per disegnare una linea in svg ci si avvale del tag <line>. <line x1="10" y1="10" x2="100" y2="100"
style="stroke:red"/>
Gli aEribu1 X1 eY1 del tag <line> indicano le coordinate di partenza della linea ( il punto IP) mentre gli aEribu1 X2 e Y2 determinano il punto di arrivo (AP) IP(10,10)
AP(100,100)
La polilinea iden1fica una zona definita da una sequenza di linee, il tag che permeEe di disegnare polilinee è: <polyline> <polyline points="10,10 50,50 90,10” style="stroke:red;fill:none"/> I pun1 indicano le coppie di valori degli aEribu1 delle coordinate dei pun1 che compongono i principali pun1 della polilinea A(10,10)
C(90,10)
B (50,50)
In SVG si possono disegnare cerchi u1lizzando il tag : <circle> <circle cx="100" cy="100" r="50"
style="stroke:red;fill:red"/>
Gli aEribu1 CX e CY indicano le coordinate del centro del cerchio, mentre l’aEributo R indica la dimensione del raggio del cerchio stesso. Radius(50)
Center(100,100)
Un poligono in SVG lo si oQene aEraverso l’uso del tag: <polygon>.
<polygon points="250,250 297,284 279,340 220,340 202,284"
style="stroke:red;fill:red"/>
AEraverso l’aEributo points è possibile specificare le coordinate dei pun1 che rappresentano gli estremi del poligono
Per disegnare un reEangolo si u1lizza il tag:<rect>. <rect x="10" y="10" rx="2" ry="2" width="100"
height="50" style="fill:red"/>
Gli aEribu1 x e y indicano le coordinate in alto a sinistra del reEangolo e u1lizzando gli aEribu1 larghezza e altezza è possibile specificare la larghezza e l'altezza del reEangolo
In SVG è possibile disegnare ellissi tramite il tag <ellipse> <ellipse cx="100" cy="100" rx="70" ry="50" style="fill:red"/>
Gli aEribu1 cx e cy esprimono le coordinate del centro dell'ellisse mentre gli aEribu1 rx e ry indicano rispeQvamente la misura del raggio dell'ellisse lungo l'asse X e lungo l'asse Y. Il path rappresenta una figura geometrica chiusa o aperta ed è cos1tuito da una sequenza di segmen1 che possono essere sia reQlinei che curvilinei <path d="M100,150 L150,100 L200,150 Z"
style="fill:red"/>
 L'aEributo d del tag <path> con1ene i comandi che permeEono di disegnare il path voluto. Nel nostro caso:  Il primo comando è M (moveto) che permeEe di indicare il punto di origine del path (il punto di coordinate x=150,y=150).  Il secondo comando è L (lineto) che permeEe di disegnare una linea dalla posizione corrente fino al punto di coordinate x=100,y=100.  Il terzo comando è nuovamente il comando L e quindi verrà disegnata una linea fino al punto di coordinate x=50,y=150.  L'ulNmo comando presente nel nostro esempio è Z (closepath) che si occupa di chiudere la figura geometrica disegnando una linea che unisce il punto corrente con quello di origine del path. I comandi base per disegnare un path sono:  
Moveto (M x,y): pone l'origine del path nel punto x,y;  
Lineto (L x,y): disegna una linea che congiunge il punto corrente con il punto x,y;  
Closepath (Z): disegna una linea che congiunge il punto corrente con l'origine del path;  
Horizontal lineto (H x): disegna una linea orizzontale che congiunge il punto corrente con il punto di coordinata x lasciando invariata la coordinata y;  
VerNcal lineto (V y): disegna una linea ver1cale che congiunge il punto corrente con il punto di coordinata y e coordinata x invariata. I comandi principali per disegnare segmen1 curvilinei in SVG sono:   Curveto (C x1,y1 x2,y2 x,y): disegna una curva cubica di Bezier secondo le modalità viste in precedenza;   Smooth Curveto (S x2,y2 x,y): disegna una curva cubica di Bezier che unisce il punto corrente con il punto di coordiante x,y. Il punto x2,y2 rappresenta il secondo punto di controllo mentre il primo punto di controllo è espresso dal simmetrico del secondo punto di controllo del comando precedente, rela1vo al punto corrente;   QuadraNc Bezier Curveto (Q x1,y1 x,y): disegna una curva quadra1ca di Bezier che unisce il punto corrente con il punto di coordinate x,y, usando il punto x1,y1 come punto di controllo.   Smooth QuadraNc Bezier Curveto (T x,y): disegna una curva quadra1ca di Bezier congiungente il punto corrente con il punto di coordinate x,y. Il punto di controllo è il simmetrico del punto di controllo del comando precedente, rela1vo al punto corrente. Esempio 1: <path d="M 50,200 C 50,100 300,100 300,200"/>
Esempio 2:
<path d="M 50,400 C 100,300 400,300 300,400"/>
In svg è possibile immeEere tes1 tramite il tag:<text>
<text x="10" y="20">Hello World</text>
tramite questo tag visualizzeremo la scriEa all'interno della nostra immagine SVG, posizionandola a par1re dal punto le cui coordinate sono espresse mediante gli aEribu1 x e y del tag <text>.
x="10" y="20"
Hello World
Con il tag <text> noi possiamo inserire del testo indicandone la posizione assoluta, cioé
specificando le coordinate del punto in cui vogliamo far comparire la scritta
Se dovessimo inserire del testo disposto su più righe, potrebbe essere comodo poter inserire il testo indicandone la posizione in maniera relaNva, ad esempio indicando la posizione di ciascuna riga in funzione della riga precedente. In SVG questo è possibile u1lizzando l'elemento <tspan>, in abbinata all'elemento <text>. <text x="20" y=“20">Hello World
<tspan dx=“30" dy="20">First Line</tspan>
<tspan dx=”0" dy="20">Second Line</tspan>
</text> Hello World
First Line
Second Line
Gli attributi del tag <tspan> dx e dy indicano di quanto deve essere
traslato (rispettivamente lungo gli assi X e Y) il testo, contenuto
all'interno del tag, rispetto all'elemento di testo precedente.
In SVG possiamo caraEerizzare l'aspeEo del testo che comparirà all'interno degli elemen1 <text> e <tspan> mediante l'uso di apposi1 aEribu1. Gli aEribu1 principali sono:  font-‐family: permeEe di specificare il 1po di font della scriEa (Times, arial,....);  font-‐size: indica la dimensione dei caraEeri che compongono la scriEa;  font-‐style: ci consente di stabilire lo s1le del testo (normal, italic, oblique);  font-‐weight: indica la grandezza dei caraEeri del testo (normal, bold, bolder, lighter,....);  text-‐decoraNon: permeEe di definire l'aspeEo del testo (normal, underline, line-‐through, overline);  fill: indica la colorazione della scriEa (red, black,......);  stroke: indica la colorazione del bordo della scriEa (red, black,....);  text-‐anchor: stabilisce l'allineamento del testo (start, middle, end);  baseline-‐shiU: permeEe di creare scriEe posizionate come apici superiori o apici inferiori (super,sub);  le,er-‐spacing: stabilisce la distanza tra i caraEeri della scriEa;  word-‐spacing: stabilisce la distanza tra le parole che compongono la scriEa; <text x="80" y="50" font-‐size="18" font-‐family="1mes" fill="Black"> EXAMPLE 1 <tspan x="80" dy="20" fill="none" stroke="blue">EXAMPLE 2</tspan> <tspan x="80" dy="20" font-‐style="oblique" text-‐anchor="middle">EXAMPLE 3</tspan> <tspan x="80" dy="20" font-‐style="bold">EXAMPLE 4</tspan> <tspan x="80" dy="20" font-‐style="lighter" fill="red">EXAMPLE 5</tspan> <tspan font-‐style="lighter" baseline-‐shiv="sub" fill="red">EXAMPLE 6</tspan> <tspan fill="green"> EXAMPLE 7</tspan> <tspan baseline-‐shiv="super" fill="green">EXAMPLE 8</tspan> </text> L'u1lizzo dell'aEributo style ci permeEe quindi di raggruppare all'interno di un unico aEributo la definizione dello s1le dell'elemento. Gli aEribu1 principali, oltre a quelli già vis1 per l'elemento testuale, per la definizione dello s1le di un elemento sono:  fill: permeEe di indicare il colore di riempimento dell'elemento. I colori possono essere espressi indicandone il nome o la loro codifica in formato rgb;  opacity: indica il livello di opacità dell'elemento. Il valore 1 indica l'opacità massima mentre il valore 0 indica che l'elemento è trasparente.  stroke: permeEe di specificare il colore della linea che cos1tuisce il bordo dell'elemento;  stroke-‐width: indica la misura dello spessore della linea;  stroke-‐dasharray: permeEe di specificare lo s1le della linea, ad esempio normale o traEeggiata;  stroke-‐linecap: definisce come saranno disegna1 gli estremi della linea ed i possibili valori sono bu,, round, square;  stroke-‐linejoin: definisce il modo in cui sarà disegnata l'intersezione tra due linee e i possibili valori sono miter, round, bevel;  
display: permeEe di controllare la visibilità di un elemento. Assegnandogli il valore none l'elemento non verrà visualizzato mentre con il valore inline l'elemento sarà visualizzato.  
fill-‐rule: determina il modo in cui verrà riempita l'area dell'elemento. Questo aEributo è molto u1le nel caso di presenza di path complessi all'interno dell'immagine, in quanto stabilisce come verranno riempite le eventuali aree di intersezione. I possibili valori sono nonzero ed evenodd ed il loro significato può essere ben compreso osservando la seguente Path
Nonzero
Evenodd
In SVG possiamo definire lo s1le di un elemento, seguendo la sintassi CSS, all'interno dell'elemento <style>
<style>
<svg viewbox="0 0 300 300">
<style type="text/css">
<![CDATA[
rect {stroke:black;fill:red;stroke-width:5}
]]>
</style>
<rect x="10" y="10" width="200" height="100"/>
</svg>
Il CSS ci eviterà di dover definire lo s1le di ogni singolo elemento Qualora avessimo la necessità di definire uno s1le diverso per un par1colare elemento, ad esempio disegnare tuQ i reEangoli rossi tranne uno blu, in CSS dovremmo scrivere
<svg viewbox="0 0 300 300">
<style type="text/css">
<![CDATA[
rect {stroke:black;fill:red;stroke-width:5}
rect.coloreblu {stroke:black;fill:blue;stroke-width:5}
]]>
</style>
<rect class="coloreblue" x="110" y="10" width="50"
height="100"/>
</svg>
Possiamo creare dei gruppi di elemenN grafici e fare così in modo che gli elemen1 appartenen1 allo stresso gruppo possano condividere determina1 aEribu1 Un gruppo di elemen1 viene definito in SVG racchiudendo gli elemen1 grafici da raggruppare all'interno del tag <g>
<g style="fill:yellow;stroke:black;stroke-width:3">
<circle cx="100" cy="100" r="50"/>
<rect x="200" y="50" width="100"
height="100"/>
</g>
Trasformare gli elemenN In SVG è possibile applicare alcune trasformazioni agli elemen1 grafici u1lizzando l'aEributo transform. Le trasformazioni possibili sono:  translate (tx,ty): permeEe di traslare la posizione dell'elemento grafico di tx unità lungo l'asse X e di ty unità lungo l'asse Y;  scale (sx, sy): effeEua un'operazione di scaling con un faEore indicato da sx, lungo l'asse X, e da sy, lungo l'asse Y Trasformare gli elemenN  rotate (ra, cx, cy): permeEe di ruotare l'elemento grafico di un angolo pari a ra. Gli aEribu1 cx e cy (che sono opzionali) indicano le coordinate del punto aEorno al quale effeEuare la rotazione;  skewX (sa): applica una trasformazione che inclina l'asse X di un angolo pari al valore indicato da sa;  skewY (sa): applica una trasformazione che inclina l'asse Y di un angolo pari al valore indicato da sa;  matrix (a, b, c, d, e, f) applica all'elemento grafico la matrice di trasformazione (3x3) indicata da [[a c e] [b d f] [0 0 1]].  
translate (tx, ty): permeEe di traslare la posizione dell'elemento grafico di tx unità lungo l'asse X e di ty unità lungo l'asse Y; original
Translate (100,0)
 
scale (sx, sy): effeEua un'operazione di scaling con un faEore indicato da sx, lungo l'asse X, e da sy, lungo l'asse Y; original
Scale (2,2)
 
rotate (ra, cx, cy): permeEe di ruotare l'elemento grafico di un angolo pari a ra. Gli aEribu1 cx e cy (che sono opzionali) indicano le coordinate del punto aEorno al quale effeEuare la rotazione; original
Rotate (270)
 
skewX (sa): applica una trasformazione che inclina l'asse X di un angolo pari al valore indicato da sa; original
skewX (45)
 
skeyY (sa): applica una trasformazione che inclina l'asse Y di un angolo pari al valore indicato da sa; original
skeyY (45)
Per inserire dei link esterni in SVG bisogna u1lizzare l'elemento <a> la cui funzione è molto simile all'analogo tag esistente in HTML <svg width="200" height="200"
xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://www.uniurb.it">
<rect x="10" y="10" width="180" height="100"
style="fill:yellow;stroke:black;stroke-width:2"/>
<text x="55" y="60" style="font-width:bold;font-family:times;fontsize:24;fill:black">Univ. Urbino</text>
</a>
</svg>
AEraverso l'uso dell'aEributo id associamo un iden1ficatore unico ai due elemen1 che compongono la nostra immagine <rect id=“rect-red" x="10" y="10" width="100" heigth="100"
style="fill:red;stroke:black"/>
<rect id=“rect-yellow" x="10" y="10" width="100" heigth="100"
style="fill:yellow;stroke:black"/>
rect-red
rect-yellow
Xlink Il ci permeEe di posizionare una scriEa lungo il bordo di un elemento <path>.
<svg width="500" height="500" xmlns:xlink="http://
www.w3.org/1999/xlink">
<path id="path1" d="M100,100L100,50C150,40 200,310
200,300Z" style="stroke:red;fill:none;stroke-width:2"/>
<text style="font-family:times;font-size:18;fill:black">
<textPath xlink:href="#path1">
Multimedia languages and applications
</textPath>
</text>
</svg>
In SVG è possibile creare dei template (modelli) di elemen1 grafici complessi che possono poi essere u1lizza1 all'interno dell'immagine. L'elemento che ci permeEe di creare un template di questo 1po è l'elemento <symbol>.
<symbol id="template1">
<rect x="20" y="5" width="10" height="10"/> =
</symbol>
Un modello può essere u1lizzato all'interno della nostra immagine SVG, tramite l'elemento <use>, stabilendo un link interno al nostro template <use x="100" y="100" xlink:href="#template1" =
style="fill:none;stroke:black;stroke-width:2"/>
Esempio:
<svg width="500" height="500" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="template1">
</symbol>
</defs>
<use x="50" y="50" xlink:href="#template1" style="fill:none;stroke:black;stroke-width:
2"/>
<use x="150" y="50" xlink:href="#template1" style="fill:yellow;stroke:black;strokewidth:2"/>
<use x="50" y="150" xlink:href="#template1" transform="translate(150,0) rotate(45)"
style="fill:blue;stroke:black;stroke-width:2"/>
<use x="80" y="60" xlink:href="#template1" transform="scale(2)"
style="fill:red;stroke:black;stroke-width:2"/>
</svg>
In SVG è possibile visualizzare immagini raster all'interno della nostro documento. X=10 Y=10
L'elemento SVG che permeEe di inserire un'immagine è <image> ed il suo funzionamento è molto simile a quello del tag <img> u1lizzato in HTML <svg width="400" height="400" xmlns:xlink="hEp://
www.w3.org/1999/xlink" > <image x="10" y="10" width="200" height="200" xlink:href=“lena.jpg"/> </svg> 200
200
L'effeEo di clipping permeEe di definire una regione della nostra immagine entro la quale saranno visualizza1 gli elemen1 grafici. In pra1ca tuEo ciò che ricade al di fuori di questa regione non verrà disegnato. L'elemento SVG che permeEe di definire la regione è il <clipPath> ed al suo interno vanno inseri1 gli elemen1 grafici che formano la regione di clipping <svg width="500" height="500" >
<defs>
<clipPath id="ellisse">
<ellipse cx="250" cy="250" ry="100" rx="200"/>
</clipPath>
</defs>
<g clip-path="url(#ellisse)">
<rect x="0" y="0" width="100" height="500" style="fill:red;stroke:none"/>
<rect x="100" y="0" width="100" height="500" style="fill:blue;stroke:none"/>
</g>
</svg> L'effeEo di masking consente di determinare un insieme di elemen1 che formano una maschera che, applicata ad elemen1 dell'immagine SVG, permeEe di creare dei sofis1ca1 effeQ di trasparenza, componendo i colori dell'oggeEo grafico con quelli della maschera. L'elemento SVG per definire la mask è <mask> ed al suo interno vanno inseri1 gli elemen1 grafici che determinano la forma della maschera <svg width="500" height="500" viewBox="0 0 500 500">
<defs>
<linearGradient id="gradiente" gradientUnits="userSpaceOnUse" x1="10"
y1="10" x2="480" y2="10">
<stop offset="0" stop-color= " white" stop-opacity="0"/>
<stop offset="1" stop-color= " blue" stop-opacity="1"/>
</linearGradient></defs>
<mask id="maschera" maskUnits="userSpaceOnUse" x="10" y="10" width="480"
height="200">
<rect x="10" y="10" width="480" height="200" fill="url(#gradiente)"/>
</mask>
<rect x="200" y="10" width="100" height="480" fill="red"/>
<rect x="10" y="10" width="480" height="200" fill="blue" mask="url
(#maschera)"/>
<rect x="10" y="250" width="480" height="200" fill="blue"/>
</svg>
SVG meEe a disposizione una serie di primi1ve grafiche che realizzano i comandi base di elaborazione dell'immagine come ad esempio   luce   ombreggiature   composizioni di colori   fusioni di elemen1 L'elemento SVG per descrivere il filtro è <filter> ed al suo interno vanno definite tuEe le primi1ve che compongono il filtro <svg width="300" height="300">
<defs>
<filter id="ombra">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"
result="passo1"/>
<feOffset in="passo1" dx="5" dy="5" result="passo2"/>
<feMerge>
<feMergeNode in="passo2"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text x="50" y="100" style="font-family:times;font-size:60;fill:red"
filter="url(#ombra)">Hello!!</text>
</svg>
Nell’esempio precedente si sono usate le seguen1 primi1ve  feGaussianBlur :usata per creare l’ombra  feOffset: usata per traslare leggermente l'ombra prodoEa in modo da creare un piccolo "effeEo 3d";  feMerge: ha il compito di comporre l'immagine originaria con l'ombra feGaussianBlur
feOffset
feMerge
AEribu1:   In: specifica il nome dell'input della primi1va <feMergeNode in="passo2"/>
<feMergeNode in="SourceGraphic"/>
  Result : permeEe di assegnare un iden1ficatore all'output prodoEo <feGaussianBlur in="SourceAlpha" stdDeviation="3"
result="passo1"/>
SVG meEe a disposizione un linguaggio di scrip1ng con il quale ges1re determina1 even1 e manipolare gli elemen1 grafici dell'immagine ECMAScript SVG meEe a disposizione una serie di metodi, che cos1tuiscono l'interfaccia DOM (Document Object Model), per accedere e manipolare i nodi della struEura. I principali metodi sono  getElementById (nome_id): res1tuisce l'elemento grafico di cui abbiamo specificato l'iden1ficatore;  setA,ribute (aEribute_name, valore_aEributo): consente di modificare il valore di un determinato aEributo di un nodo;  getA,ribute (aEribute_name): permeEe di leggere il valore di un aEributo di un elemento;  createElement (nome_elemento): consente di creare un nuovo elemento grafico;  appendChild (nome_elemento): consente di inserire un nuovo elemento come figlio del nodo a cui questa funzione è applicata. <svg id="elementoRadice" width="300" height="300" onload="aggiungiRect
()">
<script type="text/ecmascript"><![CDATA[
function aggiungiRect(){
var svgdoc=document.getElementById("elementoRadice");
var newrect=document.createElement("rect");
newrect.setAttribute("x",10);
newrect.setAttribute("y",150);
newrect.setAttribute("width",250);
newrect.setAttribute("height",100);
newrect.setAttribute("style","fill:blue;stroke:black;strokewidth:2;");
svgdoc.appendChild(newrect);
}
]]></script>
style="stroke:black;fill:red;stroke-width:2"/>
</svg>
style="stroke:black;fill:red;stroke-width:2"/>
<script>
...
...
</script>
GesNone degli evenN SVG permeEe di rendere un documento interaQvo Gli even1 possono essere ges11 associandogli degli script che vengono manda1 in esecuzione allo scatenarsi dell'evento stesso Gli even1 principali ges11 da SVG sono:  onclick: evento scatenato dal click del mouse su di un elemento grafico;  onmousemove: evento associato al movimento del mouse; GesNone degli evenN  onmouseover: evento scatenato dal passaggio del mouse su di un oggeEo grafico;  onmouseout: evento scatenato quando il puntatore del mouse abbandona l'area di un elemento grafico;  onmousedown: evento associato alla pressione del tasto del mouse su di un elemento grafico;  onload: evento scatenato quando il documento SVG viene caricato dal visualizzatore. <svg width="500" height="300" viewBox="0 0 500 300">
<script type="text/ecmascript">
<![CDATA[
function cambiaColore (evt){
var elem=evt.target;
var vecchioColore=elem.getAttribute("fill");
if (vecchioColore=="blue") nuovoColore="yellow"
else nuovoColore="blue";
elem.setAttribute("fill",nuovoColore);
}
function cambiaRaggio (evt,dimensioneRaggio){
var elem=evt.target;
elem.setAttribute("r",dimensioneRaggio);
}
]]> </script>
<rect id="rettangolo1" x="10" y="10" width="150"
height="100" fill="blue" stroke="black" stroke-width="2"
onclick="cambiaColore(evt,'yellow')" />
<circle id="cerchio" cx="350" cy="150" r="50"
fill="red" stroke="black" stroke-width="2"
onmouseover="cambiaRaggio(evt,'100')"
onmouseout="cambiaRaggio(evt,'50')"/>
</svg>
onMouseOver
onClick
È importante soEolineare l'u1lizzo del parametro evt e del metodo target Evt permeEe di iden1ficare l'elemento grafico a cui abbiamo associato l'evento scatenato e tale informazione viene passata come parametro alle funzioni rela1ve alla ges1one degli even1
function cambiaColore (evt){
target permeEe di oEenere un riferimento all'elemento grafico a cui è associato l'evento var elem=evt.target;

SVG - MaurizioMaffi.it

Transcript

Documenti analoghi

Memoria

NOTE OPERATIVE PER L`UTILIZZO DEL PROGRAMMA “IrfanView”

Parte 4_2 - Il linguaggio SVG [modalità compatibilità]

style magazine SCHEDA - RCS Communication Solutions

Guida essenziale ai file SVG

Vettori, avanti tutta! - Linux Day

Ciclo dell`acqua

Stazione di Vercelli

Scheda Test di Campbell

RTU compatta Internet-ready TBox LT2