SVG旋轉變換矩陣

我解析的從元素在SVG文件類似rotate(45,30,50)變換屬性，我想改變它的矩陣形式。我搜索了它，所有我能找到僅供rotate(a)沒有座標，它看起來像這樣[cos(a) sin(a) -sin(a) cos(a) 0 0]SVG旋轉變換矩陣

任何一個可以告訴我怎麼改造rotate(angle, x , y)以矩陣形式？

來源

2012-03-14 zeacuss

我找到了一種更簡單的方法來獲得SVG元素的變換矩陣。使用SVG元素getCTM()方法我可以得到元素的轉換矩陣，包括旋轉，平移和其他一切。

來源

2012-03-18 09:41:45 zeacuss

旋轉矩陣只能說明有關（0，0），所以你必須使用一個翻譯旋轉。

編輯查看this JSFiddle。它繪製一個用偏移量，寬度和高度定義的矩形，圍繞樞軸點旋轉。有趣的部分是最後10行左右，其中計算了offsetX和offsetY的值。一旦你有這些，你可以建立你的翻譯和你的旋轉矩陣。然後，只需將旋轉乘以翻譯，就可以得到最終結果。不幸的是，JavaScript不提供任何矩陣的功能，所以如果你不提供你的代碼，這是我所能做的

如何平移矩陣是由

1 0 offsetX 
0 1 offsetY 
0 0  1

如何旋轉矩陣由

cos -sin 0 
sin cos 0 
0  0  1

preview

來源

2012-03-14 12:27:18 Raffaele

添加翻譯將移動元素，這不是我想要的。什麼點是，是，它使得旋轉發生在其周圍，而不是（0,0）周圍的元素已經到位，但需要圍繞某一點 – zeacuss 2012-03-14 12:34:19

旋轉我不知道他指的淨效應是相同的 - 通過圍繞中心旋轉然後抵消，你可以達到同樣的目的？ – peteorpeter 2012-03-14 13:05:37

請參閱[此JSFiddle]（http://jsfiddle.net/dNGfC/） – Raffaele 2012-03-14 13:37:53

要得到SVG從支點旋轉變換矩陣，

檢查這個問題的答案

how to calculate svg transform matrix from rotation with pivot point

來源

2013-02-09 21:13:26

SVG旋轉變換矩陣

回答

相關問題