Question

我正在尝试使用snapSVG，我尝试垂直翻转100x200矩形。

在我用刻度（-1,1）翻转后，矩形从屏幕上移开（向左），所以我添加了一个平移（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）;它似乎是＆＃34;负面缩放＆＃34;也翻转了x轴坐标系。这是一个例子，我希望看到蓝色矩形，但我看到红色矩形，而是： https://codepen.io/dsotr/pen/WjRLaV

我错过了什么吗？

谢谢大家

Answer 1

变换时，会更改整个坐标空间，因此跟随变换会受到影响。 -1的负标度将有效地反映它。所以现在当你将x翻译为100时，它会向相反的方向移动。

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

如果要翻译和缩放它，请先将其翻译，然后再缩放。在Snaps变换字符串表示法中，它将是......

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

Snap SVG：编写负缩放和转换变换时的奇怪行为

1 个答案: