I have a snippet showing a "timeline". The Line (an SVG-group) should move left or right according to mouse movements. The console shows the data to work with, but I don't know how to move the g#node-line.

This is the rough structure:

svg#svg
  g#node-line
    line#line
    g#nodes
      line.node
      line.node
      line.node
      line.node
      ...

now the code:

  var ns = "";
  var svg = document.createElementNS(ns, "svg");
  svg.setAttribute("id", "svg");  
  svg.setAttribute("width", "800px");
  svg.setAttribute("height", "450px");

  var line = document.createElementNS(ns, "line");
  line.setAttribute("id", "line");
  line.setAttribute("stroke", "white");
  line.setAttribute("stroke-width", "10px");
  line.setAttribute("x1", "0");
  line.setAttribute("y1", 225);
  line.setAttribute("x2", "800");
  line.setAttribute("y2", 225);

  var nodes = document.createElementNS(ns, "g");
  nodes.setAttribute("id", "nodes");

  for (var i = 0; i < 100; i++) {

    var node = document.createElementNS(ns, "line");
    node.setAttribute("class", "node");
    node.setAttribute("stroke", "white");
    node.setAttribute("stroke-width", "2px");
    node.setAttribute("x1", i * 40 );
    node.setAttribute("y1", 225);
    node.setAttribute("x2", i * 40 );
    node.setAttribute("y2", 225 - 12);

    nodes.appendChild(node);

  }

  var nodeLine = document.createElementNS(ns, "g");
  nodeLine.setAttribute("id", "node-line");

  nodeLine.appendChild(line);
  nodeLine.appendChild(nodes);

  svg.appendChild(nodeLine);

  var container = document.getElementById('container');
  container.appendChild(svg);

  document.getElementById('svg').addEventListener('mousemove', function(e) {
    var boundaries = svg.getBoundingClientRect()
    var offset = e.clientX - boundaries.left;
    if (offset < 400) {
      var distanceFromCenter = 400 - offset;
      console.log('left: ' + distanceFromCenter);
    }
    if (offset > 400) {
      var distanceFromCenter = offset - 400;
      console.log('right: ' + distanceFromCenter);
    }
  });

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#container {
  background-color: orange;  
}

<div id="container"></div>

I have a snippet showing a "timeline". The Line (an SVG-group) should move left or right according to mouse movements. The console shows the data to work with, but I don't know how to move the g#node-line.

This is the rough structure:

svg#svg
  g#node-line
    line#line
    g#nodes
      line.node
      line.node
      line.node
      line.node
      ...

now the code:

  var ns = "http://www.w3/2000/svg";
  var svg = document.createElementNS(ns, "svg");
  svg.setAttribute("id", "svg");  
  svg.setAttribute("width", "800px");
  svg.setAttribute("height", "450px");

  var line = document.createElementNS(ns, "line");
  line.setAttribute("id", "line");
  line.setAttribute("stroke", "white");
  line.setAttribute("stroke-width", "10px");
  line.setAttribute("x1", "0");
  line.setAttribute("y1", 225);
  line.setAttribute("x2", "800");
  line.setAttribute("y2", 225);

  var nodes = document.createElementNS(ns, "g");
  nodes.setAttribute("id", "nodes");

  for (var i = 0; i < 100; i++) {

    var node = document.createElementNS(ns, "line");
    node.setAttribute("class", "node");
    node.setAttribute("stroke", "white");
    node.setAttribute("stroke-width", "2px");
    node.setAttribute("x1", i * 40 );
    node.setAttribute("y1", 225);
    node.setAttribute("x2", i * 40 );
    node.setAttribute("y2", 225 - 12);

    nodes.appendChild(node);

  }

  var nodeLine = document.createElementNS(ns, "g");
  nodeLine.setAttribute("id", "node-line");

  nodeLine.appendChild(line);
  nodeLine.appendChild(nodes);

  svg.appendChild(nodeLine);

  var container = document.getElementById('container');
  container.appendChild(svg);

  document.getElementById('svg').addEventListener('mousemove', function(e) {
    var boundaries = svg.getBoundingClientRect()
    var offset = e.clientX - boundaries.left;
    if (offset < 400) {
      var distanceFromCenter = 400 - offset;
      console.log('left: ' + distanceFromCenter);
    }
    if (offset > 400) {
      var distanceFromCenter = offset - 400;
      console.log('right: ' + distanceFromCenter);
    }
  });

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#container {
  background-color: orange;  
}

<div id="container"></div>

Thank you very much.

• javascript
• animation
• svg

1 Answer 1

Set the transform attribute of the group.

e.g. transform="translate(30,0)" to move 30 units right or transform="translate(-30,0)" to move 30 units left.