Feb 252013
 

Terzo post dedicato a svgjs. Oggi ci occuperemo del binding degli eventi.
La base di partenza è il prmo post dedicato alla libreria:


<script src="js/svg.min.js"></script>
<style>
.box{ margin:10px; border:1px solid #000; float:left;}
</style>
</head>
<body>
<div id="box1"></div>
<script>
if (SVG.supported) {
var draw1 = svg('box1').size(200, 200);
var rect = draw1.rect(100, 100).attr({ fill: '#f06' });
}
else {alert('SVG not supported');}
</script>

Creati gli oggetti su cui operare assegniamo a una variabile fclick una funzione anonima che realizza una piccola animazione. Quindi, sulla scia, delle ultime versioni di jQuery, usiamo il metodo on per assegnare all’evento click la funzione fclick, quindi cliccando sul rettangolo verrà modificato il colore di riempimento.


var fclick = function() {rect.animate(2000).attr({ fill: '#ff0' });};
rect.on('click', fclick);

L’esempio

 Posted by at 2:12 pm  Tagged with:

Sorry, the comment form is closed at this time.