如何旋轉或縮放（變換）相對於其中心點的SVG路徑？

我想旋轉和縮放SVG中心點周圍的形狀。我已經瀏覽過幾個庫，包括Jquery，Greensock，D3，RaphaelJS，但是我還沒有找到任何能夠提供直接方法來實現這一點的方法。每個動畫的形狀從原點（我明白是默認的）。我希望能夠圍繞其中心點旋轉形狀或從中心點向上或向下縮放它。如何旋轉或縮放（變換）相對於其中心點的SVG路徑？

下面是使用使用GreenSock和D3的是示出了默認行爲幾個例子：http://jsbin.com/AHEXiPa/1/edit?html,js,output

進出自左而不是保持靜止，並從該三角形的中心向外擴展的頂部的每一個這些實施例中彈跳四面八方。

我提到的其中一個庫可以完成這項工作，還是我應該考慮另一個庫或方法？

理想情況下，我需要能夠將動畫/轉換應用於DOM中的現有對象。 D3比較擅長這一點，但Raphael似乎需要在將SVG注入DOM之前先將其轉換爲Raphael。

來源

2014-01-28 Matt

你嘗試用短語SO搜索「svg圍繞中心旋轉」？你會得到很多答案，包括Raphael，D3和普通JavaScript的解決方案。 –

真的是一個挑選符合你需求的圖書館的案例，然後你會想出一個辦法。正如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);

來源

2014-01-28 20:27:26 Ian

到目前爲止，這是我最喜歡的選擇。我真的在尋找儘可能少的煩惱，因此將項目包裝到額外的組中（這似乎是其他線程中的主流選項）並不理想。做得很好，謝謝你的幫助！ – Matt

對於旋轉，@Ian指出，您可以指定旋轉中心。對於其他轉換，相對於路徑的（0,0）點來定義更改。

得到轉換相對路徑的中心工作，最簡單的方法是要麼：所以它是圍繞（0,0）點爲中心

定義路徑;或
將路徑包裝到<g>元素中，然後對其進行平移，使其位於元素座標系的（0,0）點的中心。

然後，你可以應用旋轉，縮放和變換（如果使用的話，在<g>元素上），它們都將很好地居中。

最棘手的部分是搞清楚任意形狀的「中心」。 @ Ian使用邊界框中心的方法通常會帶來不錯的結果。如果您的形狀是多邊形，則有d3 functions you could use。

實施例示出的形狀，用鼠標移動，轉動和改變規模，所有周圍的邊界框的中心爲中心：
http://fiddle.jshell.net/LgfE3/

編輯：simplier jsfiddle

來源

2014-01-30 00:49:05 AmeliaBR

真的很喜歡你的例子，尤其是使用不同的庫。 – Ian

**編輯：** [simplier jsfiddle]（http://fiddle.jshell.net/LgfE3/27/） – Hugolpz

我一直在尋找很長一段時間，並會解決以下問題。

1.設計你的SVG形狀在座標x：0，Y：0。

2.用手識別旋轉中心，例如center = [x：50，y：100]。

建立一個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/

來源

2014-11-23 20:16:11 Hugolpz

如何旋轉或縮放（變換）相對於其中心點的SVG路徑？

回答

相關問題