关于snap.svg：合并多个SVG转换


Combining Multiple SVG Transformations

我是Snap.svg和SVG的新手，正在尝试进行转换(可以在此处找到幻影般的碎片)。基本上，我试图根据形状的配置移动，缩放和旋转形状。到目前为止，这是我发现的内容：

  • 使用rotate(angle，x，y)可以绕一个点旋转
  • 没有直接的缩放方法可以围绕一个点进行缩放，但是可以按照" SVG Essentials"中的说明进行操作

但是，将这些变换组合在一起并不能带来预期的结果-预期的形状计算中心与渲染的形状中心不同。谁能给我一些关于如何正确地将这些转换放在一起的指示？

关于，
安迪

相关讨论

要组合转换，我将使用Snaps自己的transformString格式。我将首先在这里阅读我以前关于SO的答案，这略有不同，因此发布一个稍有不同的示例和答案。

虽然Snap可以使用SVG转换字符串(rotate()scale()transform())。例如，默认情况下它们不会以自身为中心，而Snap(和Raphaels)会以它为中心。这使它变得容易一些。对于更复杂的情况，可能需要研究Matrix方法，但是我认为以下应该可以...

捕捉transformString使用字符串t(transform)，s(scale)，r(rotate)，并且您可以根据需要重复添加它们。

下面是这两种方法的一个示例，以突出说明它们之间的区别。
jsfiddle这里

1
2
3
4
5
6
7
8
9
10
11
s = Snap(400, 620);

var r1 = s.rect(0, 0, 100, 100).attr({
    fill : 'blue',
    stroke : 'black',
    opacity: 0.5
});
var r2 = r1.clone().attr({ fill:"red" });

r1.transform('t100,100s2,2r45');   //typical Snap way, rotation/scale around centre
r2.transform('translate(100,100) scale(2,2,) rotate(45)');   //SVG way

据我所知，getBBox()方法应该非常可靠(如果找到错误的示例，也许在SO上发布一个单独的问题)。

相关讨论