KoGor/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Marker animation along SVG "path" element with D3.js
Based on Mike's example: Point-Along-Path Interpolation.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
  <title>SVG path animation</title>
  <link href="style.css" rel="stylesheet">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/queue.v1.min.js"></script>
</head>
<body>
  <!-- start -->
  <div id="pathAnimation">
    <script src="pathFollow.js"></script>
  </div>
  <!-- end -->
</body>
</html>

## pathFollow.js
queue()
.defer(d3.xml, "wiggle.svg", "image/svg+xml")
.await(ready);

function ready(error, xml) {

  //Adding our svg file to HTML document
  var importedNode = document.importNode(xml.documentElement, true);
  d3.select("#pathAnimation").node().appendChild(importedNode);

  var svg = d3.select("svg");

  var path = svg.select("path#wiggle"),
  startPoint = pathStartPoint(path);

  var marker = svg.append("circle");
  marker.attr("r", 7)
    .attr("transform", "translate(" + startPoint + ")");

  transition();

  //Get path start point for placing marker
  function pathStartPoint(path) {
    var d = path.attr("d"),
    dsplitted = d.split(" ");
    return dsplitted[1].split(",");
  }

  function transition() {
    marker.transition()
        .duration(7500)
        .attrTween("transform", translateAlong(path.node()))
        .each("end", transition);// infinite loop
  }

  function translateAlong(path) {
    var l = path.getTotalLength();
    return function(i) {
      return function(t) {
        var p = path.getPointAtLength(t * l);
        return "translate(" + p.x + "," + p.y + ")";//Move marker
      }
    }
  }
}

## style.css
path {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
}

circle {
  fill: red;
}

## wiggle.svg
<svg
   xmlns="http://www.w3.org/2000/svg"
   width="960"
   height="500"
   version="1.1"
   id="svg">
  <path
     d="m 480,200 c 100,0 0,250 100,200 100,-50 0,-250 100,-300 100,-50 350,100 100,200 -250,100 -350,100 -600,0 -250,-100 0,-250 100,-200 100,50 0,250 100,300 100,50 0,-200 100,-200"
     id="wiggle"
     class="weirdPath"/>
</svg>
	<!DOCTYPE html>
	<html lang="en">
	<meta charset="utf-8">
	<head>
	<title>SVG path animation</title>
	<link href="style.css" rel="stylesheet">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	</head>
	<body>
	<!-- start -->
	<div id="pathAnimation">
	<script src="pathFollow.js"></script>
	</div>
	<!-- end -->
	</body>
	</html>
	queue()
	.defer(d3.xml, "wiggle.svg", "image/svg+xml")
	.await(ready);

	function ready(error, xml) {

	//Adding our svg file to HTML document
	var importedNode = document.importNode(xml.documentElement, true);
	d3.select("#pathAnimation").node().appendChild(importedNode);

	var svg = d3.select("svg");

	var path = svg.select("path#wiggle"),
	startPoint = pathStartPoint(path);

	var marker = svg.append("circle");
	marker.attr("r", 7)
	.attr("transform", "translate(" + startPoint + ")");

	transition();

	//Get path start point for placing marker
	function pathStartPoint(path) {
	var d = path.attr("d"),
	dsplitted = d.split(" ");
	return dsplitted[1].split(",");
	}

	function transition() {
	marker.transition()
	.duration(7500)
	.attrTween("transform", translateAlong(path.node()))
	.each("end", transition);// infinite loop
	}

	function translateAlong(path) {
	var l = path.getTotalLength();
	return function(i) {
	return function(t) {
	var p = path.getPointAtLength(t * l);
	return "translate(" + p.x + "," + p.y + ")";//Move marker
	}
	}
	}
	}
	path {
	fill: none;
	stroke: #000;
	stroke-width: 1px;
	}

	circle {
	fill: red;
	}
	<svg
	xmlns="http://www.w3.org/2000/svg"
	width="960"
	height="500"
	version="1.1"
	id="svg">
	<path
	d="m 480,200 c 100,0 0,250 100,200 100,-50 0,-250 100,-300 100,-50 350,100 100,200 -250,100 -350,100 -600,0 -250,-100 0,-250 100,-200 100,50 0,250 100,300 100,50 0,-200 100,-200"
	id="wiggle"
	class="weirdPath"/>
	</svg>