title: Moving an SVG-Group left and right
body: <p>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 <code>g#node-line</code>.</p>
  
  <p>This is the rough structure:</p>
  
  <pre><code>svg#svg
    g#node-line
      line#line
      g#nodes
        line.node
        line.node
        line.node
        line.node
        ...
  </code></pre>
  
  <p>now the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  var ns = "http://www.w3.org/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 &lt; 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 &lt; 400) {
        var distanceFromCenter = 400 - offset;
        console.log('left: ' + distanceFromCenter);
      }
      if (offset &gt; 400) {
        var distanceFromCenter = offset - 400;
        console.log('right: ' + distanceFromCenter);
      }
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    height: 100%;
  }
  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  #container {
    background-color: orange;  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you very much.</p>