Esempi di SVG e jQuery

Emiliano Castellina Dipartimento di Automatica e Informatica Politecnico di Torino

Introduzione a jQuery by Emiliano Castellina is licensed under a Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 Unported License.

Plugin per jQuery   jQuery SVG

http://keith-wood.name/svg.html   Permette di creare, caricare e modificare

oggetti svg tramite la libreria jQuery   Include diversi file javascript: ◦  jquery.svg.js ◦  jquery.svggraph.js ◦  jquery.svgdom.js ◦  jquery.svganim.js ◦ ….

 Non tutti i costrutti SVG sono supportati

2

Esempio 1: disegno di un Gatto <script type="text/javascript" src="lib/jquery-1.5.1.min.js"></script>!

<script type="text/javascript" src="lib/jquery.svg.js"></script>!

<script type="text/javascript">!

$(document).ready(!

!function(){!

!/*IMPORTANTE il div che dovrà contenere !

! * l'immagine svg deve avere dimensioni specificate!

! * tramite css ! */!

!$("#divgatto").height(800).width(600); ! !!$("#divgatto").svg({//il div diventa contenitore svg!

! !onLoad: disegnaGatto!

//al caricamento del documento richiama la funzione disegnaGatto!

! !});!

!}!

)

3

Esempio 1: disegno di un Gatto function disegnaGatto(svg){!

//testa //<circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/>; !

svg.circle(70, 95, 50, {fill: 'none', stroke: 'black'}); !

//occhi//<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>!

svg.circle(55, 80, 5, {fill: '#339933', stroke: 'black'}); !

//<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>!

svg.circle(85, 80, 5, {fill: '#339933', stroke: 'black'}); !

var g = svg.group(null,'baffi'); !

//<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>!

//<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>!

svg.line(g, 75, 95, 135, 85,{stroke:'black'}); !

svg.line(g, 75, 95, 135, 105,{stroke:'black'}); !

svg.use('#baffi', {transform:'scale(-1 1) translate(-140 0)'});!

//orecchie //<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" style="stroke: black; fill: none;" /> !

svg.polyline([[108,62],[90,10],[70,45],[50], [10], [32], [62]],{stroke: 'black', fill: 'none'})!

//<!-- bocca --> <polyline points="35 110, 45 120, 95 120, 105, 110" style="stroke: black; fill: none;" />!

svg.polyline([[35,110],[45,120],[95,120],[105],[110]],{stroke: 'black', fill: 'none'})!

//naso//<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc"/>!

var path = svg.createPath();!

svg.path(path.move(75,90).line(65,90).arc(5,10,0,false,false,75,90).close(),{stroke: 'black', fill: '#ffcccc'}); !

} 4

Esempio2: caricamento file SVG $(document).ready(function(){! $("#divgatto").height(800)

! ! ! .width(600);! $("#divgatto").svg({!loadURL: 'gatto.svg'! //url file svg!

! ! ! ! !});!! ! ! !}!! ! !)

5

Esempio3: eventi del mouse //cambia il colore della testa al passaggio del mouse!function eventiGatto(){! $("#testa")!.mouseover(!function(){!

!$(this).css("fill","red");!! ! })!

.mouseout(!function(){!

!$(this).css("fill", "yellow");!! ! ! !})!! ! !}

6

Esempio4: semplice animazione <script type="text/javascript" src="lib/jquery.svganim.js"></script>!<script type="text/javascript">!$(document).ready(function(){!$("#divgatto").height(800).width(600);!$("#divgatto").svg({loadURL: 'gatto.svg', onLoad:eventiGatto});!}!)!

! ! !!function eventiGatto(){! $("#testa").click(function(){! $(this).animate({svgR:200}, 2000,!

! !function(){!! ! !$(this).animate({svgR:50},1000)!! ! !});!

})!}!</script>

7

Esempio 5: grafici   Creare un grafico a barre, che permetta di

confrontare:!◦  Il numero totale di abitanti!

◦  Il numero di donne!

◦  Il numero di uomini!

  Delle seguenti regioni!◦  Piemonte!

◦  Sicilia!

◦  Lazio!

!

8

Esempio 5: grafici $(document).ready(function(){!

$("#divgrafico").height(800).width(1000);!

$("#divgrafico").svg({onLoad: disegnaGrafico}); }) !

var chartArea = [0.2, 0.1, 0.95, 0.9];!

var legendArea = [0.005, 0.1, 0.125, 0.5];!

var fills = ['lightblue', 'pink', 'lightgreen'];!

var chartType = 'column';!

function disegnaGrafico(svg){!

svg.graph.noDraw().title('Statistiche Demografiche')!

.addSeries('Piemonte', [4446230, 2291404, 2154826], 'lightblue', 'blue', 3)!

.addSeries('Sicilia', [5042992, 2606497, 2436495], 'pink', 'red', 3)!

.addSeries('Lazio', [5681868, 2950443, 2731425], 'lightgreen', 'green', 3)!

.format('ivory', 'gray').gridlines({stroke: 'gray', strokeDashArray: '2,2'}, 'gray');!

!

svg.graph.noDraw().xAxis.title('Numero Abitanti').scale(0, 3).ticks(1, 0)!

.labels(['Totale', 'Donne', 'Uomini']).end().yAxis.scale(0, 6000000)!

.ticks(500000, 250000).end().legend.settings({fill: 'lightgoldenrodyellow',stroke: 'gray').show(1)!

.area(legendArea).end()!

.series(0).format(fills[0]).end()!

.series(1).format(fills[1]).end()!

.series(2).format(fills[2]).end()!

.area(chartArea).type(chartType, {explode: 2,explodeDist: 10}).redraw();}!

9

Esempio6: viewBox e image

10

•  Data una mappa dell'Italia in SVG •  Ogni regione ha

•  class="regione" •  Id="nome della regione"

•  Al click su una regione: •  L'immagine deve essere centrata

e zoomata sulla regione •  Al centro della regione deve essere inclusa la bandiera della religione

•  Al doppio click su una regione, deve essere visualizzata nuovamente tutta la la cartina

Esempio6: viewBox e image $(document).ready(function(){!var svg = $("#mappa2").svg({loadURL: 'italia.svg',onLoad: zoomRegione });!

! ! ! !!function zoomRegione(svg){!$('.regione').click(function(e){! var bbox=this.getBBox();! if($(this.id+'_img').length==0){! var img=svg.image(bbox.x+bbox.width/2-25, bbox.y+bbox.height/2-25, 50, 50, 'img/'+this.id+'.jpg'); !

!$(img).attr('id',this.id+'_img');}!//cambia viewBox!$(svg.root()).attr("viewBox", (bbox.x)+","+(bbox.y)+","+bbox.width+","+bbox.height);!}).dblclick(function(e){!//ripristina viewbox!$(svg.root()).attr("viewBox", "0,0,1080,1500"); !})!} !})

11

Esempio 7: orologio

 Dato un file svg contente un orologio e avente la lancetta dei secondi con id="secondi"

 Ruotare di 6 gradi la lancetta dei secondi ogni secondo

12

Esempio 7: orologio $(document).ready(function(){!$("#mappa2").svg({loadURL: 'Qtz_watch.svg', onLoad: creaOrologio });!

! ! ! !! function creaOrologio(svg){! aggiornaOra();!

!} ! })!secondi=0;!function aggiornaOra(){! var centro=$("#centro");! var x=centro.attr('cx');! var y=centro.attr('cy');! secondi++;! $("#spansecondi").html(secondi);! if(secondi>59){secondi=0;}!$("#secondi").attr('transform','rotate('+(secondi*6)+','+x+','+y+')' );!t=setTimeout(aggiornaOra,1000);!}

13