svg - 如何相对于其中心点旋转或缩放(变换)SVG 路径？

Question

我正在尝试围绕中心点旋转和缩放 SVG 中的形状。我研究了几个库，包括 Jquery、Greensock、D3、RaphaelJS，但我找不到任何提供直接方法来完成此任务的库。每个都从原点为形状设置动画(我理解这是默认设置)。我希望能够围绕其中心点旋转形状或从中心点向上或向下缩放。

下面是几个使用 Greensock 和 D3 的示例来说明默认行为:http://jsbin.com/AHEXiPa/1/edit?html,js,output

这些示例中的每一个都从左上角反弹进出，而不是保持静止并从三角形的中心向各个方向扩展。

我提到的其中一个库可以做到这一点，还是我应该考虑另一个库或方法？

理想情况下，我需要能够将动画/变换应用于 DOM 中的现有对象。例如，D3 擅长于此，但 Raphael 似乎需要先将 SVG 转换为 Raphael，然后再将其注入(inject) DOM。

Answer 1

真的是选择适合您需要的库，然后您会想办法。正如 BigBadaboom 所说，如果您进行搜索，则有很多解决方案。

为了尝试结合您的问题，因为有时棘手的一点是使用现有的 DOM 对象，我在 Snap.svg 中包含了一个示例。您通常可以在大多数库中执行类似的操作。

jsfiddle在这里Fiddle使用您现有的 html。

s = Snap("#mySVGContainer1");   // create a canvas from existing svg

var triangle1 = s.select("#myShape1").transform("r90"); //select&transform existing object


p = Snap("#mySVGContainer2");

var triangle2 = p.select("#myShape2");
var bbox = triangle2.getBBox(); //bounding box, centre cx/cy

//rotate and scale with transform string (raphael/snap format)
triangle2.animate({ transform: "r180," + bbox.cx + ',' + bbox.cy + "s3,3," + bbox.cx + "," + bbox.cy }, 2000);