Использование snap.svg для перемещения с помощью приращения с помощью стрелок клавиатуры

Question

Я пытаюсь переместить svg под именем myCurser BY, а не в позицию. Целью является перемещение фигур вдоль сетки, в данном случае 40x40. , то приращение будет изменено динамически.

Я знаю, что могу перейти на и указать новый cx для svg. но я не могу писать сх = сх + 40.

codepen

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

Вы можете посмотреть на преобразования, если вы будете двигаться более сложные объекты вокруг.