Question

我正在尝试将名为myCurser BY的svg移动到某个位置。目标是沿着网格移动形状，在这种情况下为40x40。之后，增量将动态改变。

我知道我可以转移到并为svg指定一个新的cx。但我不能写 cx = cx + 40。

var s = Snap("#svg");
var myCurser = s.circle(0, 0, 10);
//var myCurser2 = s.circle(40,40,2)

myCurser.attr({
    fill: "rgba(255,0,0,0.5)",
    stroke: "#000",
    strokeWidth: 1  
});

var increment = 40;

$(document).keydown(function(e) {

 switch(e.which) {

   case 37: // left

   break;

   case 38: // up
   break;

   case 39: // right

   myCurser.transform(t'40','40');

   break;

   case 40: // down
   break;

   default: return; // exit this handler for other keys
   }
   e.preventDefault(); // prevent the default action (scroll / move caret)
});

Answer 1

以下是我在电子邮件中给出的答案......

你想要做的事情......

myCurser.attr('cx', +myCurser.attr('cx') + 10)

注意，那里的额外+是确保它不添加字符串，它只是添加数字。

你也可以添加一个插件来做类似的事情，它可能有点令人困惑，但如果你不得不重复代码它很有用。所以插件看起来像......

Snap.plugin( function( Snap, Element, Paper, global ) {
   Element.prototype.increaseAttr = function(myattr, value) {
      return this.attr(myattr, +this.attr(myattr) + value);
   }
});


myCurser.increaseAttr('cx', -10) //// Move left

这是一个codepen，其中一个方法向右移动，另一个向左移动。

Codepen

如果您要移动更复杂的物体，您可能需要查看变换。

使用snap.svg使用键盘箭头按增量移动

1 个答案: