Местные и абсолютные координаты в Snap.svg

Question

https://jsfiddle.net/foreyez/mfcqx7vw/

var s = Snap("#svg");

var block = s.rect(100, 100, 100, 100, 20, 20);
block.attr({
    fill: "rgb(236, 240, 241)",
    stroke: "#1f2c39",
    strokeWidth: 3
});

block.animate({ transform: "T0,0" }, 200);

Я пытаюсь перевести это поле на 0,0 - это будет верхняя левая часть экрана. Но это не двигается. Так что он рассматривает мою заглавную букву T как строчную букву t и использует локальные координаты. Как мне заставить его использовать абсолют?

Answer 1

Snap уже абсолютно преображается. Просто текущий SVG не был перемещен преобразованием, он был установлен с помощью x,y.

Таким образом, у вас есть 2 варианта: анимировать x, y или анимировать преобразование и оставить x, y в покое.

За кулисами в DOM преобразование НЕ меняет x,y. У него есть отдельный атрибут transform. Оба никак не связаны.

block.animate({ transform: "t-100,-100", 200 );

jsfiddle

или же

block.animate({ x: 0, y: 0 }, 200 );

jsfiddle

На самом деле это зависит от того, чего вы пытаетесь достичь, нет правильного или неправильного пути, но если вы хотели найти решение, которое будет работать, например, для кругов и групп (поскольку у круга нет x, y, у него есть cx, cy) тогда преобразование может быть способом пойти.

Думайте об элементах SVG как о миллиметровой бумаге. Вы можете либо переместить элемент на миллиметровой бумаге, либо переместить всю графическую бумагу.

Теперь, если вы действительно хотите сделать относительное преобразование, вам нужно иметь преобразование в первую очередь для того, чтобы оно было относительно (в противном случае его относительно значения по умолчанию 0,0 слева вверху).

Поэтому, если мы начнем с создания прямоугольника без использования x, y и с помощью преобразования t100,100, чтобы переместить его в то же место

var block = s.rect(0, 0, 100, 100, 20, 20).transform('t100,100');

jsfiddle

Затем вы можете переместить его относительно этого исходного положения преобразования, включив сначала существующее преобразование. Так будет выглядеть...

block.animate({ transform: block.transform() + "t-100,-100" }, 200);

jsfiddle

Это относительно сместит его на -100,-100 больше влево и вверх.

Если бы вы хотели абсолют, это было бы..

block.animate({ transform: "t0,0", 200 );