单击鼠标移动一组SVG元素

Question

当用户单击其中的一个时，我正在尝试移动一组圈子。 第一次单击时，该组仅移动一次，但之后不移动。 这是我正在使用的示例代码：

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>

Answer 1

每次单击圆圈，事件处理程序都会将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()操作不会使矩阵发生突变。它会返回对其应用了操作的矩阵的副本。因此，您必须使用该新矩阵来更新转换。）