如何相对于其中心点旋转或缩放（变换）SVG路径？ [英] How do I rotate or scale (transform) an SVG path relative to its center point?

问题描述

我想在SVG中围绕它们的中心点旋转和缩放形状。我研究了几个库，包括Jquery，Greensock，D3，RaphaelJS，但我还没有找到任何提供一个简单的方法来完成这一点。每个动画从原点的形状（我明白是默认）。

I'm trying to rotate and scale shapes within an SVG around their center point. I've looked into several libraries, including Jquery, Greensock, D3, RaphaelJS, but I haven't been able to find any that provide a straightforward way to accomplish this. Each animates the shape from the origin point (which I understand is the default). I want to be able to spin a shape around its center point or scale it up or down from the center point.

这里有一些使用Greensock和D3的示例，它们说明了默认行为： http://jsbin.com/AHEXiPa/1/edit?html ，js，输出

Here are a couple examples using Greensock and D3 that illustrate the default behavior: http://jsbin.com/AHEXiPa/1/edit?html,js,output

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

Each of these examples bounce in and out from the top left as opposed to remaining stationary and expanding from the center of the triangle out in all directions.

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

Can one of the libraries I mentioned accomplish this, or is there another library or method I should consider?

理想情况下，我需要能够将动画/变换应用到DOM中的现有对象。 D3是好的，例如，Raphael似乎需要转换一个SVG到Raphael之前注入到DOM。

Ideally, I need to be able to apply the animation/transform to an existing object in the DOM. D3 is good at this for instance, but Raphael seems to require converting an SVG to Raphael first prior to injecting it into the DOM.

推荐答案

真的它的情况下选择适合你的需要的图书馆，然后你会想办法。因为BigBadaboom说，如果你做一个搜索，有很多解决方案。

Really its a case of pick the library that suits your needs, and then you will figure a way. As BigBadaboom says, if you do a search, there are lots of solutions.

要尝试并结合你的问题，有时棘手的是使用一个现有的DOM对象，我在Snap.svg中包含了一个示例。

To try and combine your questions, as sometimes the tricky bit is using an existing DOM object, I've included an example in Snap.svg. You can often do something similar in most libraries.

jsfiddle这里

jsfiddle here Fiddle using your existing 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);  

这篇关于如何相对于其中心点旋转或缩放（变换）SVG路径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！