Loading ...

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!