admin管理员组

文章数量:1026399

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
Share Improve this question asked Dec 16, 2016 at 12:41 TimoTimo 2615 silver badges18 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 4

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.

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
Share Improve this question asked Dec 16, 2016 at 12:41 TimoTimo 2615 silver badges18 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 4

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.

本文标签： javascriptMoving an SVGGroup left and rightStack Overflow

版权声明：本文标题：javascript - Moving an SVG-Group left and right - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745646882a2161074.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。