Get coordinates along an SVG path

get-coordinates-along-an-svg-path.markdown

Get coordinates along an SVG path

A Pen by Jameal G on CodePen.

License.

index.html

<div class="container">
  <div id="obj"></div>
  <svg version="1.1" x="0px" y="0px" width="440.5px" height="147.2px" viewBox="0 0 440.5 147.2" enable-background="new 0 0 440.5 147.2"
     xml:space="preserve">
  <path id="path" fill="none" stroke="#000000" stroke-width="2.8243" stroke-miterlimit="10" d="M1.3,78c0,0,74-172.3,198,0s240-38.3,240-38.3"
    />
  </svg>

  <br><br>

  <input type="range" name="slider" id="slider" min="0" max="100" width="500">
  <input type="text" name="slider_val" size="3" id="slider_val">
  <br><br>
  <button id="toggle_animation_btn">Toggle Animation</button>
</div>

script.js

// The two important methods here are
// path.getTotalLength and path.getPointAtLength

// For more info see:
// https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement

var path = document.getElementById('path')
var obj = document.getElementById('obj');
// Length of path
var pathLength = Math.floor( path.getTotalLength() );

// Move obj element along path based on percentage of total length
function moveObj(prcnt)
{
  prcnt = (prcnt*pathLength) / 100;

  // Get x and y values at a certain point in the line
  pt = path.getPointAtLength(prcnt);
  pt.x = Math.round(pt.x);
  pt.y = Math.round(pt.y);
  
  obj.style.webkitTransform = 'translate3d('+pt.x+'px,'+pt.y+'px, 0)';
}

// Initialize
moveObj(0);

// Slider functionality
var sliderEl = document.getElementById('slider');
var sliderValEl = document.getElementById('slider_val');
sliderEl.addEventListener('mousemove', function() {

  sliderValEl.value = this.value;
  moveObj(sliderValEl.value);
});

// Animation functionality
// Use request animation frame for better performance 
// if you're doing a lot of animation
var toggleAnimationBtn = document.getElementById('toggle_animation_btn')
var animationTimer = false;

function animationHandler(prcnt) {
  moveObj(prcnt);
  sliderEl.value = prcnt;
  sliderValEl.value = prcnt;
  
  
  if(prcnt < 100)
  {
    animationTimer = setTimeout(function() {
      animationHandler(prcnt+1);
    },50)
  }
  else
  {
    animationTimer = setTimeout(function() { 
      animationHandler(0);
    }, 50);
  }
}

toggleAnimationBtn.addEventListener('mouseup', function() {
  if(animationTimer) {
    clearTimeout(animationTimer);
    animationTimer = false;
  }
  else
  {
    animationTimer = animationHandler(0);
  }
});

style.css

body {
  margin: 5em;
}
#obj {
  background: blue;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  position: absolute;
  /* Align center */
  top:-10px;
  left: -10px;
  opacity: 0.5;
}

.container {
  width: 438px;
  margin: 0 auto;
  position: relative;
}
input[type="range"] {
  width: 400px; 
}