diff --git a/demos/tutorial/index.html b/demos/tutorial/index.html index d68a47e..874185c 100644 --- a/demos/tutorial/index.html +++ b/demos/tutorial/index.html @@ -140,68 +140,68 @@
    -
  1. // First lets create our drawing surface out of existing SVG element -// If you want to create new surface just provide dimensions +
  2. // 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");
    3. -
  3. // Lets create big circle in the middle: +
  4. // Let's create a big circle in the middle: var bigCircle = s.circle(150, 150, 100); -// By default its black, lets change its attributes
    5. +// By default it is black, let's change its attributes
  5. bigCircle.attr({ fill: "#bada55", stroke: "#000", strokeWidth: 5 });
    6. -
  6. // Now lets create another small circle: +
  7. // Now let's create another small circle: var smallCircle = s.circle(100, 150, 70);
    8. -
  8. // Lets put this small circle and another one into a group: +
  9. // Let's put this small circle and another one into a group: var discs = s.group(smallCircle, s.circle(200, 150, 70));
  10. // Now we can change attributes for the whole group discs.attr({ fill: "#fff" });
  11. // Now more interesting stuff -// Lets assign this group as a mask for our big circle +// Let's assign this group as a mask for our big circle bigCircle.attr({ mask: discs });
    12. -
  12. // Despite our small circle now is a part of a group -// and a part of a mask we could still access it: +
  13. // Despite our small circle being part of a group +// and part of a mask we can still access it: smallCircle.animate({r: 50}, 1000);
    14. -
  14. // We don’t have reference for second small circle, -// but we could easily grab it with CSS selectors: +
  15. // 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);
    16. -
  16. // Now lets create pattern +
  17. // 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 pattern, -// just specify dimensions in pattern method: +// 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 big circle +// Then use it as a fill on the big circle bigCircle.attr({ fill: p });
    18. -
  18. // We could also grab pattern from SVG +
  19. // We can also grab a pattern from an SVG // already embedded into our page discs.attr({ fill: Snap("#pattern") });
    20. -
  20. // Lets change fill of circles to gradient +
  21. // 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 you have two gradients for each circle
    22. +// Note that we have two gradients, one for each circle
  22. // If we want them to share one gradient, -// we need to use absolute gradient with capital R +// we need to use an absolute gradient with capital R discs.attr({fill: "R(150, 150, 100)#fff-#000"});
    23. -
  23. // Of course we could animate color as well +
  24. // Of course we can animate color as well p.select("path").animate({stroke: "#f00"}, 1000);
    25. -
  25. // Now lets load external SVG file: +
  26. // Now let's load an external SVG file: Snap.load("mascot.svg", function (f) { - // Note that we traversre and change attr before SVG + // 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"); @@ -211,9 +211,9 @@ Snap.load("mascot.svg", function (f) { // Obviously drag could take event handlers too // Looks like our croc is made from more than one polygon... });
    27. -
  27. // Now lets load external SVG file: +
  28. // Now let's load an external SVG file: Snap.load("mascot.svg", function (f) { - // Note that we traversre and change attr before SVG + // 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"); @@ -223,7 +223,7 @@ Snap.load("mascot.svg", function (f) { // Obviously drag could take event handlers too // That’s better! selectAll for the rescue. });
    29. -
  29. // Writing text as simple as: +
  30. // Writing text is as simple as: s.text(200, 100, "Snap.svg");
  31. // Provide an array of strings (or arrays), to generate tspans var t = s.text(200, 120, ["Snap", ".", "svg"]);