Raphael js Example

Codice di esempio delle funzionalità di Raphael js (path, animation, mousein mouseout). Questo codice è parte integrante dell'articolo http://www.netd.it/sviluppo/grafica-vettoriale-sul-web-con-svg-e-raphael-js

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>
<p>Esempio Raphael js</p>
<p>Pubblicato nell'articolo <a href="http://www.netd.it/sviluppo/grafica-vettoriale-sul-web-con-svg-e-raphael-js" target="_blank">Integrare SVG nelle pagine web con Raphael</a>.</p>
<div id="canv">
</div>

CSS

#canv{
border: solid 1px #a0a0a0;
width: 600px;
height: 300px;
background: #000000;
}

JavaScript

// Larghezza del foglio SVG
var width = 600;
// Altezza del foglio SVG
var height = 300;
// Crea un foglio SVG all'interno dell'elemento 'element'.
var paper = Raphael("canv", width, height);
// Pathstring dell'icona "home"
var pathString = "M 270 190 l 0 -50 l -18 0 l 60 -45 l 60 45 l -18 0 l 0 50 z m 20 -40 l 0 40 l 20 0 l 0 -40 z";
// Aggiungiamo la forma al foglio
var pth = paper.path(pathString);
// Dichiariamo un oggetto javascript contenente un elenco di proprietà
var attributes = {
    "stroke-width": 4,
    "cursor": "pointer",
    "href": "//www.netd.it",
    "target": "blank",
    "stroke": "#e7e7e7",
    "gradient": "90-#BBCBFF-#3866FF"
};
// Passiamo gli attributi all'oggetto
pth.attr(attributes);

// Inizializziamo un'animazione di zoomIn in modalità 'elastica'
var mouseIn = Raphael.animation({
    'transform': 's1.25'
}, 1000, "elastic");
// Inizializziamo un'animazione di zoomOut in modalità 'elastica'
var mouseOut = Raphael.animation({
    'transform': 's1'
}, 1000, "elastic");
// Associamo le animazioni agli eventi mouse[in/out]
pth.mouseover(function() {
    this.animate(mouseIn);
});
pth.mouseout(function() {
    this.animate(mouseOut);
});