Manipolare SVG in Javascript con Snap.svg

Mattepuffo's logo
Manipolare SVG in Javascript con Snap.svg

Manipolare SVG in Javascript con Snap.svg

Programmazione, Javascript - AJAX

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!

Condividi

Commentami!