2013-10-21 13:56:55 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<title>Tutorial</title>
|
2014-05-05 10:39:16 +00:00
|
|
|
|
<link rel="stylesheet" href="../../doc/fonts/stylesheet.css">
|
|
|
|
|
|
<link rel="stylesheet" href="../../doc/css/prism.css">
|
2013-10-21 13:56:55 +00:00
|
|
|
|
<style media="screen">
|
|
|
|
|
|
pre.code {
|
|
|
|
|
|
-moz-border-radius: 10px;
|
|
|
|
|
|
-webkit-border-radius: 10px;
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
height: 280px;
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
background: #181818;
|
|
|
|
|
|
border: solid 2px #181818;
|
|
|
|
|
|
}
|
|
|
|
|
|
#codelines {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
#svg {
|
|
|
|
|
|
-moz-border-radius: 10px;
|
|
|
|
|
|
-webkit-border-radius: 10px;
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
border: solid 2px #ccc;
|
|
|
|
|
|
width: 300px;
|
|
|
|
|
|
height: 300px;
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
font: 1em source-sans-pro, Source Sans Pro, Helvetica, sans-serif;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<script src="../../dist/snap.svg-min.js"></script>
|
2014-05-05 10:39:16 +00:00
|
|
|
|
<script src="../../doc/js/prism.js"></script>
|
2013-10-21 13:56:55 +00:00
|
|
|
|
<script>
|
|
|
|
|
|
var S;
|
|
|
|
|
|
window.onload = function () {
|
2013-10-22 00:30:46 +00:00
|
|
|
|
var s = Snap(850, 35);
|
2013-10-21 13:56:55 +00:00
|
|
|
|
function chooser(s, count) {
|
|
|
|
|
|
var loop = "M35,65a30,30,0,0,0,0-60a30,30,0,0,0,0,60",
|
|
|
|
|
|
line = "M35,65a30,30,0,0,0,0-60a30,30,0,0,0,0,60c30,0,60-60,90-60a30,30,0,0,1,0,60a30,30,0,0,1,0-60",
|
|
|
|
|
|
l1 = Snap.path.getTotalLength(loop),
|
|
|
|
|
|
l2 = Snap.path.getTotalLength(line),
|
|
|
|
|
|
cur = 1,
|
|
|
|
|
|
p = s.path({
|
|
|
|
|
|
path: loop,
|
|
|
|
|
|
fill: "none",
|
|
|
|
|
|
stroke: "#f00",
|
|
|
|
|
|
strokeWidth: 6,
|
|
|
|
|
|
strokeLinecap: "round"
|
|
|
|
|
|
});
|
|
|
|
|
|
for (var i = 1; i <= count; i++) {
|
|
|
|
|
|
s.text(90 * i - 55, 49, i).attr({
|
|
|
|
|
|
font: "45px source-sans-pro, Source Sans Pro, Helvetica, sans-serif",
|
|
|
|
|
|
textAnchor: "middle"
|
|
|
|
|
|
});
|
2013-10-22 00:30:46 +00:00
|
|
|
|
(function (i) {
|
|
|
|
|
|
s.circle(90 * i - 55, 35, 40).attr({
|
|
|
|
|
|
opacity: 0
|
|
|
|
|
|
}).click(eve.f("tut.click", i - 1));
|
|
|
|
|
|
}(i));
|
2013-10-21 13:56:55 +00:00
|
|
|
|
}
|
2013-10-22 00:30:46 +00:00
|
|
|
|
s.path("M11.166,23.963L22.359,17.5c1.43-0.824,1.43-2.175,0-3L11.166,8.037c-1.429-0.826-2.598-0.15-2.598,1.5v12.926C8.568,24.113,9.737,24.789,11.166,23.963z").transform("t" + (90 * (count + 1) - 68) + ",18s2");
|
|
|
|
|
|
var but = s.circle(90 * (count + 1) - 55, 35, 30).attr({
|
|
|
|
|
|
fillOpacity: 0,
|
|
|
|
|
|
stroke: "#333",
|
|
|
|
|
|
strokeWidth: 2
|
|
|
|
|
|
});
|
|
|
|
|
|
eve.on("tut.click", function (I) {
|
|
|
|
|
|
p.attr({
|
|
|
|
|
|
path: loop,
|
|
|
|
|
|
transform: "t" + (90 * I) + ",0"
|
|
|
|
|
|
});
|
|
|
|
|
|
cur = I + 1;
|
|
|
|
|
|
});
|
|
|
|
|
|
function frameHandler(frame) {
|
2013-10-21 13:56:55 +00:00
|
|
|
|
function anim() {
|
|
|
|
|
|
cur++;
|
|
|
|
|
|
if (cur > count) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (typeof frame == "function") {
|
|
|
|
|
|
frame(cur);
|
|
|
|
|
|
}
|
|
|
|
|
|
Snap.animate(0, l2 - l1, function (val) {
|
|
|
|
|
|
p.attr({
|
|
|
|
|
|
path: Snap.path.getSubpath(line, val, val + l1)
|
|
|
|
|
|
});
|
|
|
|
|
|
}, 500, function () {
|
|
|
|
|
|
p.attr({
|
|
|
|
|
|
path: loop,
|
|
|
|
|
|
transform: p.transform() + "t90,0"
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
if (typeof frame == "function") {
|
2013-10-22 00:30:46 +00:00
|
|
|
|
but.click(anim);
|
2013-10-21 13:56:55 +00:00
|
|
|
|
} else {
|
|
|
|
|
|
anim();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2013-10-22 00:30:46 +00:00
|
|
|
|
return frameHandler;
|
2013-10-21 13:56:55 +00:00
|
|
|
|
}
|
|
|
|
|
|
var g = s.g();
|
|
|
|
|
|
g.attr({
|
|
|
|
|
|
transform: "s.5,.5,0,0"
|
|
|
|
|
|
});
|
|
|
|
|
|
var str = "",
|
|
|
|
|
|
code = document.getElementById("code");
|
|
|
|
|
|
var domcodelines = document.querySelectorAll("#codelines li"),
|
|
|
|
|
|
codelines = [],
|
|
|
|
|
|
replacers = {},
|
|
|
|
|
|
lines = [],
|
|
|
|
|
|
callback = function (i) {
|
2013-10-22 00:30:46 +00:00
|
|
|
|
lines = [];
|
|
|
|
|
|
for (var j = 1; j <= i; j++) {
|
|
|
|
|
|
replacers[j - 1] && lines.pop();
|
|
|
|
|
|
lines.push(codelines[j - 1]);
|
|
|
|
|
|
}
|
2013-10-21 13:56:55 +00:00
|
|
|
|
Snap("#svg").clear();
|
|
|
|
|
|
str = lines.join("\n");
|
|
|
|
|
|
eval(str);
|
|
|
|
|
|
code.innerHTML = Prism.highlight(str, Prism.languages.javascript);
|
2013-10-22 00:30:46 +00:00
|
|
|
|
code.parentNode.scrollTop = code.parentNode.scrollTopMax || 1e9;
|
2013-10-21 13:56:55 +00:00
|
|
|
|
};
|
|
|
|
|
|
for (var i = 0, ii = domcodelines.length; i < ii; i++) {
|
2013-10-22 00:30:46 +00:00
|
|
|
|
codelines[i] = domcodelines[i].innerHTML;
|
2013-10-21 13:56:55 +00:00
|
|
|
|
if (domcodelines[i].className == "replace") {
|
|
|
|
|
|
replacers[i] = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
callback(1);
|
2013-10-22 00:30:46 +00:00
|
|
|
|
chooser(g, codelines.length)(callback);
|
|
|
|
|
|
eve.on("tut.click", function (I) {
|
|
|
|
|
|
callback(I + 1);
|
|
|
|
|
|
});
|
2013-10-21 13:56:55 +00:00
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<ol id="codelines">
|
2013-11-05 13:45:43 +00:00
|
|
|
|
<li>// First, let's create our drawing surface out of an existing SVG element
|
|
|
|
|
|
// If you want to create a new surface just provide dimensions
|
2013-10-21 13:56:55 +00:00
|
|
|
|
// like s = Snap(800, 600);
|
|
|
|
|
|
var s = Snap("#svg");</li>
|
2013-11-05 13:45:43 +00:00
|
|
|
|
<li>// Let's create a big circle in the middle:
|
2013-10-21 13:56:55 +00:00
|
|
|
|
var bigCircle = s.circle(150, 150, 100);
|
2013-11-05 13:45:43 +00:00
|
|
|
|
// By default it is black, let's change its attributes</li>
|
2013-10-21 13:56:55 +00:00
|
|
|
|
<li>bigCircle.attr({
|
|
|
|
|
|
fill: "#bada55",
|
|
|
|
|
|
stroke: "#000",
|
|
|
|
|
|
strokeWidth: 5
|
|
|
|
|
|
});</li>
|
2013-11-05 13:45:43 +00:00
|
|
|
|
<li>// Now let's create another small circle:
|
2013-10-21 13:56:55 +00:00
|
|
|
|
var smallCircle = s.circle(100, 150, 70);</li>
|
2013-11-05 13:45:43 +00:00
|
|
|
|
<li>// Let's put this small circle and another one into a group:
|
2013-10-21 13:56:55 +00:00
|
|
|
|
var discs = s.group(smallCircle, s.circle(200, 150, 70));</li>
|
|
|
|
|
|
<li>// Now we can change attributes for the whole group
|
|
|
|
|
|
discs.attr({
|
|
|
|
|
|
fill: "#fff"
|
|
|
|
|
|
});</li>
|
|
|
|
|
|
<li>// Now more interesting stuff
|
2013-11-05 13:45:43 +00:00
|
|
|
|
// Let's assign this group as a mask for our big circle
|
2013-10-21 13:56:55 +00:00
|
|
|
|
bigCircle.attr({
|
|
|
|
|
|
mask: discs
|
|
|
|
|
|
});</li>
|
2013-11-05 13:45:43 +00:00
|
|
|
|
<li>// Despite our small circle being part of a group
|
|
|
|
|
|
// and part of a mask we can still access it:
|
2013-10-21 17:19:55 +00:00
|
|
|
|
smallCircle.animate({r: 50}, 1000);</li>
|
2013-11-05 13:45:43 +00:00
|
|
|
|
<li>// We don’t have a reference for second small circle,
|
|
|
|
|
|
// but we can easily grab it with CSS selectors:
|
2013-10-21 17:19:55 +00:00
|
|
|
|
discs.select("circle:nth-child(2)").animate({r: 50}, 1000);</li>
|
2013-11-05 13:45:43 +00:00
|
|
|
|
<li>// Now let's create pattern
|
2013-10-21 13:56:55 +00:00
|
|
|
|
var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
|
|
|
|
|
|
fill: "none",
|
|
|
|
|
|
stroke: "#bada55",
|
|
|
|
|
|
strokeWidth: 5
|
|
|
|
|
|
});
|
2013-11-05 13:45:43 +00:00
|
|
|
|
// To create a pattern,
|
|
|
|
|
|
// just specify dimensions in the pattern method:
|
2013-10-21 13:56:55 +00:00
|
|
|
|
p = p.pattern(0, 0, 10, 10);
|
2013-11-05 13:45:43 +00:00
|
|
|
|
// Then use it as a fill on the big circle
|
2013-10-21 13:56:55 +00:00
|
|
|
|
bigCircle.attr({
|
|
|
|
|
|
fill: p
|
|
|
|
|
|
});</li>
|
2013-11-05 13:45:43 +00:00
|
|
|
|
<li>// We can also grab a pattern from an SVG
|
2013-10-21 13:56:55 +00:00
|
|
|
|
// already embedded into our page
|
|
|
|
|
|
discs.attr({
|
|
|
|
|
|
fill: Snap("#pattern")
|
|
|
|
|
|
});</li>
|
2013-11-05 13:45:43 +00:00
|
|
|
|
<li>// Let's change the fill of the circles to gradient
|
2013-10-21 13:56:55 +00:00
|
|
|
|
// This string means relative radial gradient
|
|
|
|
|
|
// from white to black
|
|
|
|
|
|
discs.attr({fill: "r()#fff-#000"});
|
2013-11-05 13:45:43 +00:00
|
|
|
|
// Note that we have two gradients, one for each circle</li>
|
2013-10-21 13:56:55 +00:00
|
|
|
|
<li>// If we want them to share one gradient,
|
2013-11-05 13:45:43 +00:00
|
|
|
|
// we need to use an absolute gradient with capital R
|
2013-10-21 13:56:55 +00:00
|
|
|
|
discs.attr({fill: "R(150, 150, 100)#fff-#000"});</li>
|
2013-11-05 13:45:43 +00:00
|
|
|
|
<li>// Of course we can animate color as well
|
2013-10-21 13:56:55 +00:00
|
|
|
|
p.select("path").animate({stroke: "#f00"}, 1000);</li>
|
2013-11-05 13:45:43 +00:00
|
|
|
|
<li>// Now let's load an external SVG file:
|
2013-10-21 13:56:55 +00:00
|
|
|
|
Snap.load("mascot.svg", function (f) {
|
2013-11-05 13:45:43 +00:00
|
|
|
|
// Note that we traverse and change attr before the SVG
|
2013-10-21 13:56:55 +00:00
|
|
|
|
// 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...
|
|
|
|
|
|
});</li>
|
2013-11-05 13:45:43 +00:00
|
|
|
|
<li class="replace">// Now let's load an external SVG file:
|
2013-10-21 13:56:55 +00:00
|
|
|
|
Snap.load("mascot.svg", function (f) {
|
2013-11-05 13:45:43 +00:00
|
|
|
|
// Note that we traverse and change attr before SVG
|
2013-10-21 13:56:55 +00:00
|
|
|
|
// 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.
|
|
|
|
|
|
});</li>
|
2013-11-05 13:45:43 +00:00
|
|
|
|
<li>// Writing text is as simple as:
|
2013-10-21 13:56:55 +00:00
|
|
|
|
s.text(200, 100, "Snap.svg");</li>
|
|
|
|
|
|
<li>// 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"
|
|
|
|
|
|
});</li>
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
<svg id="svg"></svg>
|
|
|
|
|
|
<pre class="javascript code"><code data-language="javascript" class="language-javascript" id="code"></code></pre>
|
|
|
|
|
|
<svg width="0" height="0">
|
|
|
|
|
|
<pattern id="pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" viewBox="0 0 10 10">
|
|
|
|
|
|
<path d="M-5,0,10,15M0-5,15,10" stroke="white" stroke-width="5"/>
|
|
|
|
|
|
</pattern>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
