SVG Paths

[AndrewPixel]

I've been working with moving a DIV along an SVG path. While it does move the DIV along the path that it uses the CSS transform's translate caused issues for me as the DIV is positioned using percentage values so things like interrupting the motion to move the DIV to another point caused "issues".

I tried WAAPI but while it worked it got a bit too involved for me.

I addressed it with this:

const div = document.querySelector('div');
const svg = document.querySelector('svg');
const path = svg.querySelector('path');
      
const vb = svg.viewBox.baseVal;
const totalLen = path.getTotalLength();
const w = div.offsetWidth / 2;
const h = div.offsetHeight / 2;

const target = { progress: 0 };

const config = {
  progress: 1,
  duration: options.duration * 1000,
  ease: options.ease,
  alternate: options.alternate,
  loop: options.loop - 1,
  onUpdate: () => {
    // Sample point on path at current progress
    const pt = path.getPointAtLength(target.progress * totalLen);
    const pt2 = path.getPointAtLength(target.progress * totalLen + 0.1);
    // Angle in degrees between the two points
    const angle = Math.atan2(pt2.y - pt.y, pt2.x - pt.x) * (180 / Math.PI);
    // Convert SVG coords → CSS percentages using viewBox dimensions
    const pctX = ((pt.x - w) / vb.width)  * 100;
    const pctY = ((pt.y - h) / vb.height) * 100;
    
    // Apply as CSS percentages — NOT pixels
    div.style.left = `${pctX.toFixed(3)}%`;
    div.style.top  = `${pctY.toFixed(3)}%`;
   
    if (options.rotate) {
      div.style.rotate = `${angle.toFixed(1)}deg`;
    }
  }
};
  
const anim = animate(target, config);

Now the DIV follows the SVG path but it stays as percentages.