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

每次点击一个圈子时，事件处理程序都会将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()操作不会改变矩阵。它会返回矩阵的副本并应用操作。因此，您必须使用新矩阵更新变换。）

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

1 个答案: