Svgjs è una leggerissima libreria molto utile per manipolare e animare elementi svg.
Anche la sintassi è abbastanza semplice e intuitiva e quindi potrebbe essere un utile strumento per lavorare agevolmente con questo linguaggio.
Facciamo qualche prova. Dopo aver scaricato e collegatlo la libreria
<script src="js/svg.min.js"></script>
Inseriamo nella nostra pagina un paio di div che useremo come target dove inserire le nostre creazioni e mostriamoli con un semplice css.
<style>
.box{ margin:10px; border:1px solid #000; float:left;}
</style>
<div id="box1"></div>
<div id="box2"></div>
A questo punto possiamo passare alla nostra libreria per disegnare gli elementi di nostro interesse, nello specifico un rettangolo e un cerchio. Prima però ci accerteremo che il nostro browser supporti svg, sono quindi esclusi dai giochi le versioni di internet explorer precedenti alla 9. In caso di supporto esistente definiremo una variabile a cui indicheremo il div target dove andare ad appendere l’SVG creato e le dimensioni e poi il metodo per creare l’oggetto di nostro interesse e le sue dimensioni. Nel caso del rettangolo aggiungiamo con la concatenazione un metodo attr per lavorare con le proprietà dell’oggetto, in questo caso colorarlo, Ecco il codice:
if (SVG.supported) {
var draw1 = svg('box1').size(200, 200);
var rect = draw1.rect(100, 100).attr({ fill: '#f06' });
var draw2 = svg('box2').size(200, 200);
var circle = draw2.circle(100);
}
else {alert('SVG not supported');}
L’esempio
