將SVG組左右移動

Question

我有一個顯示「時間軸」的片段。 Line（SVG組）應根據鼠標移動向左或向右移動。控制檯顯示要使用的數據，但我不知道如何移動g#node-line。

這是粗糙的結構：

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

現在代碼：

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 < 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>

非常感謝你。

Answer 1

設置組的transform屬性。

例如transform="translate(30,0)"右移30個單位或transform="translate(-30,0)"移動30個單位。