Question

我正在尝试围绕其中心点旋转和缩放SVG内的形状。我已经研究了几个库，包括Jquery，Greensock，D3，RaphaelJS，但我找不到任何提供直接的方法来实现这一目标。每个动画从原点（我理解为默认值）动画形状。我希望能够围绕其中心点旋转一个形状，或者从中心点向上或向下缩放。

以下是一些使用Greensock和D3的示例，用于说明默认行为：http://jsbin.com/AHEXiPa/1/edit?html,js,output

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

我提到的其中一个库可以实现这个目标，还是我应该考虑使用另一个库或方法？

理想情况下，我需要能够将动画/变换应用于DOM中的现有对象。例如D3很擅长这一点，但Raphael似乎要求在将SVG注入DOM之前先将SVG转换为Raphael。

Answer 1

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

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

jsfiddle here 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);

Answer 2

对于旋转，如@Ian指出的那样，您可以指定旋转中心。对于其他转换，更改是相对于路径的（0,0）点定义的。

使转换相对于路径中心工作的最简单方法是：

定义路径，使其以（0,0）点为中心;或
将路径包裹在<g>元素中，然后将其翻译，使其位于<g>元素坐标系的（0,0）点的中心位置。

然后，您可以应用旋转，缩放和变换（在<g>元素上，如果使用的话），它们都将很好地居中。

最棘手的部分是找出任意形状的“中心”。 @ Ian使用边界框中心的方法通常会得到不错的结果。如果您的形状是多边形，则为d3 functions you could use。

显示用鼠标移动的形状，旋转和改变比例的示例，全部以边界框的中心为中心：
http://fiddle.jshell.net/LgfE3/

修改： simplier jsfiddle

Answer 3

我一直在寻找很长一段时间，并会满足于以下内容。

1。在坐标x：0，y：0 处设计svg形状。

2。手动识别旋转中心，例如，center = [x：50，y：100]。

3。构建spinIt()函数，例如：

function spinIt() { needle.transition() .duration(2000) .attrTween("transform", tween); function tween() { return d3.interpolateString("rotate(-180, 50, 100)", "rotate(90, 50, 100)"); } }

4. 在triger上使用它：

svg.on("click", spinIt);

http://jsfiddle.net/SHF2M/79/

如何相对于其中心点旋转或缩放（变换）SVG路径？

3 个答案: