1

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

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

1 回答 1

7

每次单击一个圆圈时，事件处理程序都会将元​​素的transform属性设置为。我相信您打算做的是每次单击一个圆圈时重复翻译。换句话说，您希望将翻译与已应用于元素的翻译组合在一起。像这样：g"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-26T06:31:52.893 回答