Manipolare SVG in Javascript con Snap.svg

Manipolare SVG in Javascript con Snap.svg

La libreria Snap.svg ci permette di lavorare con SVG in Javascript in maniera abbastanza semplice (sempre se si conosce la materia).

La cosa bella è che può sia creare / manipolare SVG da zero, che già esistenti.

Anche l'installazione è molto semplice, in quanto non richiede altre librerie.

Qui sotto vediamo un esempio basico:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>SNAP SVG</title>
        <script src="Snap.svg-0.5.1/snap.svg-min.js"></script>
        <script>
            window.onload = function () {
                var s = Snap("#svg");
                var bigCircle = s.circle(150, 150, 100);
                bigCircle.attr({
                    fill: "#ff6678",
                    stroke: "#887720",
                    strokeWidth: 5
                });
            }
        </script>
        <style>
            #svg {
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;
                border: solid 2px #ccc;
                width: 300px;
                height: 300px;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <svg id="svg"></svg>
    </body>
</html>

Nel file zippato che scaricate ci stanno parecchi altri esempi.

Come potete vedere, è possibile fare qualsiasi cosa, senza scrivere codice astruso.

Ci pensa la libreria a fare il lavoro pesante.

Enjoy!




Share

Commentami!

About Mattepuffo.com

Blog dedicato all'informatica e alla programmazione!
Tutti i contenuti di questo blog, tranne casi particolari, sono sotto licenza Licenza Creative Commons Creative Commons Attribution-Noncommercial-Share Alike 2.5. .

2576 articoli
310 commenti
19 progetti
Altri link
  • About
  • Scrivimi
  • Copyright
  • Sitemap
  • matteo.ferrone@yahoo.it
  • GitHub
  • Privacy Policy