Snap.svg 中的本地坐标与绝对坐标

Question

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 的矩形，并使用 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 中的本地坐标与绝对坐标

Local vs Absolute Coordinates in Snap.svg

javascript

svg

snap.svg