Tutorial
Dmitry Baranovskiy
parent
9cb27e5f5f
commit
931c5905f1
|
|
@ -0,0 +1,224 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Tutorial</title>
|
||||
<link rel="stylesheet" href="../../dist/fonts/stylesheet.css">
|
||||
<link rel="stylesheet" href="../../dist/css/prism.css">
|
||||
<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>
|
||||
<script src="../../dist/js/prism.js"></script>
|
||||
<script>
|
||||
var S;
|
||||
window.onload = function () {
|
||||
var s = Snap(800, 50);
|
||||
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"
|
||||
});
|
||||
}
|
||||
function frame(frame) {
|
||||
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") {
|
||||
return anim;
|
||||
} else {
|
||||
anim();
|
||||
}
|
||||
}
|
||||
return frame;
|
||||
}
|
||||
var g = s.g();
|
||||
g.attr({
|
||||
transform: "s.5,.5,0,0"
|
||||
});
|
||||
var str = "",
|
||||
code = document.getElementById("code");
|
||||
for (var i in code) {
|
||||
if (~i.indexOf("scroll")) {
|
||||
console.log(i);
|
||||
}
|
||||
}
|
||||
var domcodelines = document.querySelectorAll("#codelines li"),
|
||||
codelines = [],
|
||||
replacers = {},
|
||||
lines = [],
|
||||
callback = function (i) {
|
||||
replacers[i - 1] && lines.pop();
|
||||
lines.push(codelines[i - 1]);
|
||||
Snap("#svg").clear();
|
||||
str = lines.join("\n");
|
||||
eval(str);
|
||||
code.innerHTML = Prism.highlight(str, Prism.languages.javascript);
|
||||
code.parentNode.scrollTop = 1e9;
|
||||
};
|
||||
for (var i = 0, ii = domcodelines.length; i < ii; i++) {
|
||||
codelines[i] = domcodelines[i].innerText;
|
||||
if (domcodelines[i].className == "replace") {
|
||||
replacers[i] = true;
|
||||
}
|
||||
}
|
||||
callback(1);
|
||||
window.onclick = chooser(g, codelines.length)(callback);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ol id="codelines">
|
||||
<li>// 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");</li>
|
||||
<li>// Lets create big circle in the middle:
|
||||
var bigCircle = s.circle(150, 150, 100);
|
||||
// By default its black, lets change its attributes</li>
|
||||
<li>bigCircle.attr({
|
||||
fill: "#bada55",
|
||||
stroke: "#000",
|
||||
strokeWidth: 5
|
||||
});</li>
|
||||
<li>// Now lets create another small circle:
|
||||
var smallCircle = s.circle(100, 150, 70);</li>
|
||||
<li>// Lets put this small circle and another one into a group:
|
||||
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
|
||||
// Lets assign this group as a mask for our big circle
|
||||
bigCircle.attr({
|
||||
mask: discs
|
||||
});</li>
|
||||
<li>// 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);</li>
|
||||
<li>// 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);</li>
|
||||
<li>// 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
|
||||
});</li>
|
||||
<li>// We could also grab pattern from SVG
|
||||
// already embedded into our page
|
||||
discs.attr({
|
||||
fill: Snap("#pattern")
|
||||
});</li>
|
||||
<li>// 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</li>
|
||||
<li>// 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"});</li>
|
||||
<li>// Of course we could animate color as well
|
||||
p.select("path").animate({stroke: "#f00"}, 1000);</li>
|
||||
<li>// 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...
|
||||
});</li>
|
||||
<li class="replace">// 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.
|
||||
});</li>
|
||||
<li>// Writing text as simple as:
|
||||
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>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<svg version="1.1" id="crocodile" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="312px" height="300px" viewBox="0 0 260 250" enable-background="new 0 0 260 250" xml:space="preserve">
|
||||
<g>
|
||||
<path id="symbol" opacity="0.2" fill="#848383" enable-background="new " d="M185.631,140.915l5.02,10.86l8.145-3.765
|
||||
l-5.02-10.86L185.631,140.915z M246.828,109.341l-47.613,25.306l5.02,10.86l50.123-19.876L246.828,109.341z"/>
|
||||
<g id="head">
|
||||
<polygon fill="#09B39C" points="44.613,146.703 26.665,140.721 8.718,146.703 -0.252,146.703 -0.252,206.523 44.613,206.523
|
||||
119.387,206.523 119.387,167.64 "/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="-0.252,146.703 11.712,170.631 26.667,140.721
|
||||
8.721,146.703 "/>
|
||||
<polyline opacity="0.2" fill="#FFFFFF" enable-background="new " points="8.718,146.703 20.685,152.685 26.665,140.721 "/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="44.613,146.703 53.613,163.667 17.694,143.712
|
||||
26.667,140.721 "/>
|
||||
</g>
|
||||
<g id="upper-head">
|
||||
<g id="upper-jaw">
|
||||
<g>
|
||||
<path id="upper-teeth" fill="#E0CAB1" d="M151.174,129.382l14.913,6.086l-6.602-14.691L151.174,129.382z M138.707,142.292
|
||||
l14.914,6.086l-6.603-14.692L138.707,142.292z M126.241,155.201l14.913,6.086l-6.602-14.692L126.241,155.201z M163.64,116.474
|
||||
l14.913,6.085l-6.603-14.692L163.64,116.474z M176.106,103.564l14.913,6.086l-6.602-14.692L176.106,103.564z M188.572,90.655
|
||||
l14.914,6.085l-6.602-14.691L188.572,90.655z M201.039,77.746l14.913,6.085L209.35,69.14L201.039,77.746z M221.816,56.23
|
||||
l-8.311,8.607l14.913,6.085L221.816,56.23z"/>
|
||||
<path opacity="0.4" fill="#FFFFFF" enable-background="new " d="M155.329,125.08l10.758,10.388l-6.602-14.691L155.329,125.08
|
||||
z M142.863,137.989l10.758,10.389l-6.603-14.692L142.863,137.989z M130.396,150.898l10.758,10.389l-6.602-14.692
|
||||
L130.396,150.898z M167.796,112.171l10.757,10.388l-6.603-14.692L167.796,112.171z M180.261,99.261l10.758,10.389l-6.602-14.692
|
||||
L180.261,99.261z M192.728,86.352l10.758,10.388l-6.602-14.691L192.728,86.352z M205.195,73.443l10.757,10.388L209.35,69.14
|
||||
L205.195,73.443z M221.816,56.23l-4.156,4.303l10.758,10.389L221.816,56.23z"/>
|
||||
</g>
|
||||
<polygon fill="#09B39C" points="215.135,33 200.18,33 197.189,46.955 92,125 88.355,171.706 106.387,180.64 236.072,47.955
|
||||
"/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="92,125 97.423,150.703 197.189,46.955 "/>
|
||||
<line opacity="0.2" fill="#FFFFFF" enable-background="new " x1="197.189" y1="46.955" x2="92" y2="125"/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="200.18,33 236.072,47.955 215.135,33 "/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="197.189,46.955 215.135,33 200.18,33 "/>
|
||||
</g>
|
||||
<polygon fill="#09B39C" points="92,125 65.55,126.757 44.613,146.703 44.613,176.523 119.387,176.523 119.387,167.64
|
||||
107.897,156.377 "/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="92,125 102.423,145.703 65.55,126.757 "/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="44.613,146.703 102.423,145.703 92,125 65.55,126.757
|
||||
"/>
|
||||
<polygon id="eye_1_" fill="#FFFFFF" points="71.532,145.703 83.495,139.721 95.459,145.703 80.505,154.676 "/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="44.613,146.703 44.613,158.667 92,125 65.55,126.757
|
||||
"/>
|
||||
</g>
|
||||
<g id="bottom-jaw">
|
||||
<g>
|
||||
<polygon fill="#E0CAB1" points="152.531,185.586 158.513,170.631 164.495,185.586 "/>
|
||||
<polygon opacity="0.4" fill="#FFFFFF" enable-background="new " points="164.495,185.586 158.513,170.631 158.513,185.586
|
||||
"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon fill="#E0CAB1" points="170.477,185.586 176.459,170.631 182.441,185.586 "/>
|
||||
<polygon opacity="0.4" fill="#FFFFFF" enable-background="new " points="182.441,185.586 176.459,170.631 176.459,185.586
|
||||
"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon fill="#E0CAB1" points="188.423,185.586 194.405,170.631 200.387,185.586 "/>
|
||||
<polygon opacity="0.4" fill="#FFFFFF" enable-background="new " points="200.387,185.586 194.405,170.631 194.405,185.586
|
||||
"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon fill="#E0CAB1" points="206.369,185.586 212.351,170.631 218.333,185.586 "/>
|
||||
<polygon opacity="0.4" fill="#FFFFFF" enable-background="new " points="218.333,185.586 212.351,170.631 212.351,185.586
|
||||
"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon fill="#E0CAB1" points="224.315,185.586 230.297,170.631 236.279,185.586 "/>
|
||||
<polygon opacity="0.4" fill="#FFFFFF" enable-background="new " points="236.279,185.586 230.297,170.631 230.297,185.586
|
||||
"/>
|
||||
</g>
|
||||
<polygon fill="#E0CAB1" points="148.54,179.604 119.596,167.64 109.657,167.64 103.675,167.64 91.711,167.64 79.747,179.604
|
||||
0,200.541 0,206.523 79.747,206.523 156.522,206.523 187.432,198.55 235.288,189.577 244.252,179.604 "/>
|
||||
<polygon opacity="0.3" fill="#FFFFFF" enable-background="new " points="119.594,167.64 91.711,167.64 79.747,179.604 "/>
|
||||
<polygon opacity="0.3" fill="#FFFFFF" enable-background="new " points="91.711,167.64 79.747,206.523 79.747,179.604 "/>
|
||||
<polygon opacity="0.1" fill="#534741" enable-background="new " points="235.288,189.577 160.513,195.559 115.639,206.523
|
||||
156.522,206.523 187.432,198.55 "/>
|
||||
<polygon opacity="0.1" fill="#534741" enable-background="new " points="187.432,198.55 160.513,195.559 156.522,206.523
|
||||
156.522,206.523 "/>
|
||||
<polygon opacity="0.3" fill="#FFFFFF" enable-background="new " points="0,200.541 46.847,194.559 79.747,179.604 "/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.6 KiB |
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Snap.svg</title>
|
||||
<style>
|
||||
body {
|
||||
background: #333;
|
||||
}
|
||||
</style>
|
||||
<script src="../../dist/snap.svg-min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<script>
|
||||
var s = Snap();
|
||||
var bigCircle = s.circle(100, 100, 50);
|
||||
bigCircle.attr({
|
||||
fill: "#bada55",
|
||||
stroke: "#000",
|
||||
strokeWidth: 5
|
||||
});
|
||||
var smallCircle = s.circle(70, 100, 40);
|
||||
var discs = s.group(smallCircle, s.circle(130, 100, 40));
|
||||
discs.attr({
|
||||
fill: Snap("#pattern")
|
||||
});
|
||||
bigCircle.attr({
|
||||
mask: discs
|
||||
});
|
||||
Snap.load("mascot.svg", function (f) {
|
||||
var g = f.select("g");
|
||||
f.selectAll("polygon[fill='#09B39C']").attr({
|
||||
fill: "#fc0"
|
||||
})
|
||||
s.append(g);
|
||||
g.drag();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue