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。 它具有单独的变换属性。 两者之间没有任何联系。

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的rect并使用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 );