// First, let's create our drawing surface out of an existing SVG element
// If you want to create a new surface just provide dimensions
// like s = Snap(800, 600);
var s = Snap("#svg");
// Let's create a big circle in the middle:
var bigCircle = s.circle(150, 150, 100);
// By default it is black, let's change its attributes
// Now let's create another small circle:
var smallCircle = s.circle(100, 150, 70);
// Let's put this small circle and another one into a group:
var discs = s.group(smallCircle, s.circle(200, 150, 70));
// Now we can change attributes for the whole group
discs.attr({
fill: "#fff"
});
// Now more interesting stuff
// Let's assign this group as a mask for our big circle
bigCircle.attr({
mask: discs
});
// Despite our small circle being part of a group
// and part of a mask we can still access it:
smallCircle.animate({r: 50}, 1000);
// We don’t have a reference for second small circle,
// but we can easily grab it with CSS selectors:
discs.select("circle:nth-child(2)").animate({r: 50}, 1000);
// Now let's create pattern
var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
fill: "none",
stroke: "#bada55",
strokeWidth: 5
});
// To create a pattern,
// just specify dimensions in the pattern method:
p = p.pattern(0, 0, 10, 10);
// Then use it as a fill on the big circle
bigCircle.attr({
fill: p
});
// We can also grab a pattern from an SVG
// already embedded into our page
discs.attr({
fill: Snap("#pattern")
});
// Let's change the fill of the circles to gradient
// This string means relative radial gradient
// from white to black
discs.attr({fill: "r()#fff-#000"});
// Note that we have two gradients, one for each circle
// If we want them to share one gradient,
// we need to use an absolute gradient with capital R
discs.attr({fill: "R(150, 150, 100)#fff-#000"});
// Of course we can animate color as well
p.select("path").animate({stroke: "#f00"}, 1000);
// Now let's load an external SVG file:
Snap.load("mascot.svg", function (f) {
// Note that we traverse and change attr before the SVG
// is even added to the page
f.select("polygon[fill='#09B39C']").attr({fill: "#bada55"});
g = f.select("g");
s.append(g);
// Making croc draggable. Go ahead drag it around!
g.drag();
// Obviously drag could take event handlers too
// Looks like our croc is made from more than one polygon...
});
// Now let's load an external SVG file:
Snap.load("mascot.svg", function (f) {
// Note that we traverse and change attr before SVG
// is even added to the page
f.selectAll("polygon[fill='#09B39C']").attr({fill: "#bada55"});
g = f.select("g");
s.append(g);
// Making croc draggable. Go ahead drag it around!
g.drag();
// Obviously drag could take event handlers too
// That’s better! selectAll for the rescue.
});
// Writing text is as simple as:
s.text(200, 100, "Snap.svg");
// Provide an array of strings (or arrays), to generate tspans
var t = s.text(200, 120, ["Snap", ".", "svg"]);
t.selectAll("tspan:nth-child(3)").attr({
fill: "#900",
"font-size": "20px"
});