组合多个 SVG 转换答案

【问题标题】：Combining Multiple SVG Transformations组合多个 SVG 转换
【发布时间】：2014-06-10 11:12:00
【问题描述】：

我是 Snap.svg 和 SVG 的新手，并且正在尝试转换（可以在 here 找到一个说明性的 plunk）。基本上我正在尝试根据其配置移动、缩放和旋转形状。这是我迄今为止发现的：

使用rotate(angle, x, y) 可以围绕一个点旋转
没有直接的变换方法来围绕一个点进行缩放，但可以按照“SVG Essentials”中的描述来完成

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

问候，安迪

【问题讨论】：

你能包括你的方法是计算一个变换对象的中心吗？如果您想要转换对象的中心，我可能会使用 element.getBBox().cx & cy （或者如果转换可能是 element.getBBox(1)）。我也会把它分解成一个更小的块来理解它。很难理解你的问题是你的变换是错误的，还是你的中心不是你想象的那样。
好吧，plunk 中的实际代码非常小——正如你所见，我从初始坐标计算中心，这并不难，因为为了简单起见，我存储了宽度和高度.顺便说一句，我的经验是 element.getBBox() 不是一个真正可靠的，有时我会得到明显错误的数字。这就是我硬编码宽度和高度的原因。这是另一个需要解决的问题......

标签： svg snap.svg

【解决方案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 上发布一个单独的问题）

【讨论】：

是的，Snap 格式使它更容易，非常感谢！对于那些对 AngularJS 的 SVG 转换示例感兴趣的人 - 我已经更新了 Plunk