From 931c5905f1d953c3ff6a88aac15f1b75b262dd2b Mon Sep 17 00:00:00 2001 From: Dmitry Baranovskiy Date: Mon, 21 Oct 2013 06:56:55 -0700 Subject: [PATCH] Tutorial --- demos/tutorial/index.html | 224 +++++++++++++++++++++++++++++++++++ demos/tutorial/mascot.svg | 81 +++++++++++++ demos/tutorial/tutorial.html | 45 +++++++ 3 files changed, 350 insertions(+) create mode 100644 demos/tutorial/index.html create mode 100644 demos/tutorial/mascot.svg create mode 100644 demos/tutorial/tutorial.html diff --git a/demos/tutorial/index.html b/demos/tutorial/index.html new file mode 100644 index 0000000..2da150b --- /dev/null +++ b/demos/tutorial/index.html @@ -0,0 +1,224 @@ + + + + + Tutorial + + + + + + + + +
    +
  1. // First lets create our drawing surface out of existing SVG element +// If you want to create new surface just provide dimensions +// like s = Snap(800, 600); +var s = Snap("#svg");
    2. +
  2. // Lets create big circle in the middle: +var bigCircle = s.circle(150, 150, 100); +// By default its black, lets change its attributes
    3. +
  3. bigCircle.attr({ + fill: "#bada55", + stroke: "#000", + strokeWidth: 5 +});
    4. +
  4. // Now lets create another small circle: +var smallCircle = s.circle(100, 150, 70);
    5. +
  5. // Lets put this small circle and another one into a group: +var discs = s.group(smallCircle, s.circle(200, 150, 70));
    6. +
  6. // Now we can change attributes for the whole group +discs.attr({ + fill: "#fff" +});
    7. +
  7. // Now more interesting stuff +// Lets assign this group as a mask for our big circle +bigCircle.attr({ + mask: discs +});
    8. +
  8. // Despite our small circle now is a part of a group +// and a part of a mask we could still access it: +smallCircle.animate({r: 25}, 1000);
    9. +
  9. // We don’t have reference for second small circle, +// but we could easily grab it with CSS selectors: +discs.select("circle:nth-child(2)").animate({r: 25}, 1000);
    10. +
  10. // Now lets 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 pattern, +// just specify dimensions in pattern method: +p = p.pattern(0, 0, 10, 10); +// Then use it as a fill on big circle +bigCircle.attr({ + fill: p +});
    11. +
  11. // We could also grab pattern from SVG +// already embedded into our page +discs.attr({ + fill: Snap("#pattern") +});
    12. +
  12. // Lets change fill of circles to gradient +// This string means relative radial gradient +// from white to black +discs.attr({fill: "r()#fff-#000"}); +// Note that you have two gradients for each circle
    13. +
  13. // If we want them to share one gradient, +// we need to use absolute gradient with capital R +discs.attr({fill: "R(150, 150, 100)#fff-#000"});
    14. +
  14. // Of course we could animate color as well +p.select("path").animate({stroke: "#f00"}, 1000);
    15. +
  15. // Now lets load external SVG file: +Snap.load("mascot.svg", function (f) { + // Note that we traversre and change attr before 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... +});
    16. +
  16. // Now lets load external SVG file: +Snap.load("mascot.svg", function (f) { + // Note that we traversre 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. +});
    17. +
  17. // Writing text as simple as: +s.text(200, 100, "Snap.svg");
    18. +
  18. // 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" +});
    19. +
+ +
+ + + + + + + \ No newline at end of file diff --git a/demos/tutorial/mascot.svg b/demos/tutorial/mascot.svg new file mode 100644 index 0000000..1db1d56 --- /dev/null +++ b/demos/tutorial/mascot.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demos/tutorial/tutorial.html b/demos/tutorial/tutorial.html new file mode 100644 index 0000000..25cdb5c --- /dev/null +++ b/demos/tutorial/tutorial.html @@ -0,0 +1,45 @@ + + + + + Snap.svg + + + + + + + + + + + + \ No newline at end of file