在鼠标上移动一组SVG元素点击

我试图在用户单击其中一个时移动一组圆圈。该组仅在第一次点击时移动一次，但之后不会移动。下面是示例代码我使用，在鼠标上移动一组SVG元素点击

function move_circle(e)  
{ 
var grp = e.target.parentNode; 
grp.setAttribute("transform", "translate(" + 50 + ", " + 50 + ")"); 
} 

<g onclick="move_circle(evt)"> 
    <circle cx="150" cy="100" r="25" fill="red" /> 
    <circle cx="170" cy="120" r="5" fill="red" /> 
</g>

来源

2012-12-26 user1929041

您应该创建一个[jsFiddle]（http ：//jsfiddle.net/）当问这样的问题时的例子。它让回答问题的人更容易看到您的代码示例正在运行。 – seliopou

，你点击一个圆，该事件处理程序设置g元素的transform属性"translate(50, 50)"每次。我相信你打算做的是每次点击一个圆时重复翻译。换句话说，你想用已经应用到元素的翻译来编写翻译。如下所示：

function move_circle(e) { 
    var g = e.target.parentNode, 
     t; 

    if (g.transform.baseVal.numberOfItems == 0) { 
    g.setAttribute("transform", "translate(" + 50 + ", " + 50 + ")"); 
    } else { 
    t = g.transform.baseVal.getItem(0), 
    t.setMatrix(t.matrix.translate(50, 50)); 
    } 
}

如果未应用任何转换，它将按照以前的方式应用翻译。如果一个变换已经应用到元素上，那么你使用现有的变换矩阵，应用的另一个变换，然后将其结果设置为元素的变换矩阵。（translate()操作不会改变矩阵，它会返回矩阵的一个副本并应用该操作，因此必须使用该新矩阵更新转换）。

来源

2012-12-26 06:31:52 seliopou

在鼠标上移动一组SVG元素点击

回答

相关问题