單擊鼠標移動一組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()操作不會使矩陣發生突變。它會返回對其應用了操作的矩陣的副本。因此，您必須使用該新矩陣來更新轉換。）