Snap SVG：组成负比例和平移转换时的奇怪行为

Question

我正在尝试使用 snapSVG 并试图垂直翻转一个 100x200 的矩形。

在我用 scale(-1,1) 翻转它之后，矩形离开了屏幕（向左），所以我添加了一个 translate(100,0) 将它带回来，但它只是移得更远了左边：

var r1 = s.rect(0, 0, 100, 200);
console.log(r1.getBBox().x + " * " + r1.getBBox().x2); // gives 0 * 100
r1.transform("scale(-1,1) translate(100,0)");
console.log(r1.getBBox().x + " * " + r1.getBBox().x2); // gives -200 * -100

原来为了把它带回来我需要一个翻译（-100,0）； "negative scaling" 似乎也翻转了 x 轴坐标系。这是一个示例，我希望看到蓝色矩形，但我看到的是红色矩形： https://codepen.io/dsotr/pen/WjRLaV

我是不是漏掉了什么？

谢谢大家

Answer 1

当你变换时，你改变了整个坐标space，所以后面的变换会受到影响。 -1 的负比例将有效地反映它。所以现在当你将 x 平移 100 时，它会向相反的方向移动。

如果你想垂直翻转它，按 's1,-1' 缩放它（或者 's-1,1' 如果你想在另一个轴上翻转它）。如果您使用 Snaps 转换字符串表示法，它也会从中心开始缩放。如果您使用 scale(x,y) 那么它将从默认值 0,0 开始缩放，这通常不是您想要的。

如果要平移缩放，先平移再缩放。在 Snaps 转换字符串表示法中，它将是...

r1.transform('t100,0s1,-1');

Snap SVG：组成负比例和平移转换时的奇怪行为

Snap SVG: odd behaviour when composing negative scale and translate transformations

snap.svg