zcy
/
snap.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #96 from oslego/fix-docs 

fix typos and tenses in tutorial
master
Dmitry Baranovskiy 2013-11-05 16:13:22 -08:00
parent a5d8368e6b 79162b126b
commit e217a1ee83
1 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
demos/tutorial/index.html
View File

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