Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 29, 2014 18:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/1ad1be1d38272d09e70a to your computer and use it in GitHub Desktop.
Save anonymous/1ad1be1d38272d09e70a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<style id="jsbin-css">
#svgout {
height: 600px;
}
</style>
</head>
<body>
<svg id="svgout" width="100%" height="100%"></svg>
<script id="jsbin-javascript">
var s = Snap("#svgout");
var rect = s.rect(20,20,40,40);
var circle = s.circle(60,150,50);
var move = function(dx,dy) {
this.attr({
transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
});
};
var start = function() {
console.log(this.transform().local);
this.data('origTransform', this.transform().local );
};
var stop = function() {
console.log('finished dragging');
};
rect.drag(move, start, stop );
circle.drag(move, start, stop );
</script>
<script id="jsbin-source-css" type="text/css">#svgout {
height: 600px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var s = Snap("#svgout");
var rect = s.rect(20,20,40,40);
var circle = s.circle(60,150,50);
var move = function(dx,dy) {
this.attr({
transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
});
};
var start = function() {
console.log(this.transform().local);
this.data('origTransform', this.transform().local );
};
var stop = function() {
console.log('finished dragging');
};
rect.drag(move, start, stop );
circle.drag(move, start, stop );
</script></body>
</html>
Raw
jsbin.nisudubera.css
#svgout {
height: 600px;
}
Raw
jsbin.nisudubera.js
var s = Snap("#svgout");
var rect = s.rect(20,20,40,40);
var circle = s.circle(60,150,50);
var move = function(dx,dy) {
this.attr({
transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
});
};
var start = function() {
console.log(this.transform().local);
this.data('origTransform', this.transform().local );
};
var stop = function() {
console.log('finished dragging');
};
rect.drag(move, start, stop );
circle.drag(move, start, stop );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment