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，则它有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 );

Snap.svg中的局部与绝对坐标

1 个答案: