Snap SVG Dersleri

Ders 1: text

Snap Svg Yazı

Ders 2: Circle

Snap Svg Daire

Ders 3: animate

Snap Svg animasyon

Ders 4: drag

Snap Svg Sürükle

Ders 5: square

Snap Svg kare

Ders 6: ellipse

Snap Svg elips

Ders 7: text, circle

Snap Svg yazı ve daire

Ders 8: image

Snap Svg resim

Ders 9: group

Snap Svg grup

<!DOCTYPE html>
<html>
<head>
	<title>Snap SVG Dersleri</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<style>
*{margin: 0;padding: 0;}
body {background: #ffffff;font-family: TTKB Dik Temel Abece;}
header h1 {padding: 7px;text-align: center;}
main {background: #FFFFFF;}
main h1 {font-size: 18px;padding: 7px;text-align: center;}
main h2 {font-size: 16px;padding: 7px 10px 3px 10px;}
main p {font-size: 14px;padding: 7px 10px 3px 10px;}
main svg {
	border: 1px solid #ccc;
	background: transparent;
	margin: 10px;
	width: 340px;
	height:200px;
}
main footer {
width: 100%;	
position: fixed;
left: 0;
bottom: 0;
}
footer p{
font-family: Tahoma;
color: #000;
font-size: 14px;
text-align: center;
padding: 7px 10px 5px 10px;
}
</style>
</head>
<body>
	<main>
	<h1>Snap SVG Dersleri</h1>
<h2>Ders 1: text</h2>
<p>Snap Svg Yazı</p>
<svg id="svg1"></svg>
<h2>Ders 2: Circle</h2>
<p>Snap Svg Daire</p>
<svg id="svg2"></svg>
<h2>Ders 3: animate</h2>
<p>Snap Svg animasyon</p>
<svg id="svg3"></svg>
<h2>Ders 4: drag</h2>
<p>Snap Svg Sürükle</p>
<svg id="svg4"></svg>
<h2>Ders 5: square</h2>
<p>Snap Svg kare</p>
<svg id="svg5"></svg>
<h2>Ders 6: ellipse</h2>
<p>Snap Svg elips</p>
<svg id="svg6"></svg>
<h2>Ders 7: text, circle</h2>
<p>Snap Svg yazı ve daire</p>
<svg id="svg7"></svg>
<h2>Ders 8: image</h2>
<p>Snap Svg resim</p>
<svg id="svg8"></svg>
<h2>Ders 9: group</h2>
<p>Snap Svg grup</p>
<svg id="svg9"></svg>
<script>
/* Ders 1: text */
var s = Snap("#svg1");
    s.text("50%", "50%", "Testing")
    s.attr({
    font: "50px Tahoma",
    fill: "red",
    stroke: "black",
    strokeWidth: 1,
    textAnchor: "middle", // start,middle ve end parametrelerinden biri kullanılır
    });
/* Ders 2: circle */
var s = Snap("#svg2");
var c = s.circle(100, 70, 50);
    c.attr({
    fill: "#fff",
    stroke: "#000",
    strokeWidth: 5
    });
// Ders 3: animate
var s = Snap("#svg3");
var c = s.circle(100, 70, 50);
    c.attr({
    fill: "#f00",
    stroke: "#555",
    strokeWidth: 2   
    });
var smallCircle = s.circle(70, 70, 30);
   smallCircle.animate({r: 50}, 1000);
// Ders 4: drag   
var s = Snap("#svg4");
   var c = s.circle(100, 70, 50);
   c.attr({
   fill: "pink",
   stroke: "#555",
   strokeWidth: 5,
   strokeOpacity: .2,   
   });
   c.drag();
// Ders 5: square
var s = Snap("#svg5");
var sq = s.rect(10,10,100,100);
    sq.attr({
    fill: "purple",
    stroke: "#555",
    strokeWidth: 2,
    strokeOpacity: .2
    });
// Ders 6: ellipse 
var s = Snap("#svg6");
var ellipse = s.ellipse(160,100,60,30);
    ellipse.attr({
    fill: "coral",
    stroke: "#555",
    strokeWidth: 2,
    strokeOpacity: .6
    });
// Ders 7: yazı ve daire 
var s = Snap("#svg7")
var c = s.circle(170, 100, 50)
    s.text("50%", "20%", "Circle") 
    s.attr({
        font: "40px Tahoma",
    	fill: "red",
    	stroke: "black",
    	fontSize:"30px",
    	textAnchor: "middle", // start, middle, end parametrelerini alabilir   
}); 
//Ders 8: img
var s = Snap("#svg8"); 
var g = s.g();
var x=0;
var y=0;
var img = s.image('https://img.webme.com/pic/k/kodlamakursu/snap-svg.jpg', x, y, 340, 230);
// Ders 9: group
    var s = Snap("#svg9");
    var circle = s.circle(100,70,50);
    var circle2 = s.circle(180,70,50);
    var circles = s.group(circle, circle2);
    circles.attr({
    fill:"#0cdfde"
    });