Question

我是Snap.svg和SVG的新手并尝试进行转换（可以找到一个插图的插件here）。基本上我正在尝试根据其配置移动，缩放和旋转形状。这是我到目前为止所发现的：

使用rotate(angle, x, y)
没有直接变换方法来缩放点，但可以按照“SVG Essentials”

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

此致岸堤

Answer 1

要组合变换，我会使用Snaps自己的transformString格式。我首先要读一下我之前关于SO here的答案，这略有不同，所以发布一个略有不同的例子和答案。

虽然Snap可以使用SVG转换字符串（rotate（）scale（）transform（））。例如，它们不会默认居中，而Snaps（和Raphaels）会这样做。这使它更容易一些。对于更复杂的情况，可能需要查看Matrix方法，但我认为以下情况应该没问题......

Snaps transformString使用字符串t（变换），s（缩放），r（旋转），如果需要，可以重复添加它们。

以下是两种方法的示例，以突出差异。 jsfiddle here

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上发布一个单独的问题）

结合多个SVG转换

1 个答案: