PJCHENder 未整理筆記

[SVG] 讓物體在原地旋轉

2017-09-25

[SVG] 讓物體在原地旋轉

@(HTML)[svg, html]

SVG 物體旋轉的時候是以 <svg></svg> 的左上角當作圓心進行旋轉,因此當我們直接對 svg 內的元素進行 rotate 時,常常不是我們想要的效果。若我們想要讓物體在原地進行選轉的話,可以使用一些技巧。

img

操作範例

可以搭配範例看下面的說明,SVG 原地旋轉 @ Codepen

STEP 0: 原本方形的位置

假設我們原本在 <svg></svg> 中畫一個方形:

1
2
3
4
<svg>
<!-- 原本方形的位置(400, 300) -->
<rect x="400" y="300" width="40" height="30" stroke="#41b883" stroke-width="2" fill="#41CEC0"></rect>
</svg>

STEP 1: 先讓物體進行位移(translate)把圓心移到原物體中心點

為了讓這個方形能在原地旋轉,我們要把旋轉的圓心透過 transalte 移動到方形的中心點:

img

我們可以計算出方形的中心點是:

1
2
3
4
// x' = x + width / 2
x' = 400 + 40 / 2 = 420
// y' = y + height / 2
y' = 300 + 30 / 2 = 315

因此我們可以寫 transform="transalte(420, 315)"

1
2
3
4
5
<!--  STEP1: 先移動旋轉圓心的位置    -->
<!-- x' = x + width /2 -->
<!-- y' = y + height / 2 -->
<!-- translate(400 + 40/2, 300 + 30/2) -->
<rect x="400" y="300" width="40" height="30" stroke="#41b883" stroke-width="2" fill="#41CEC0" transform="translate(420, 315)"></rect>

STEP 2: 選擇想要旋轉的角度

接著看你需要旋轉的角度,使用 rotate,在這裡我旋轉 45 度。

1
2
3
<!--   STEP2: 進行旋轉   -->
<!-- rotate(45) -->
<rect x="400" y="300" width="40" height="30" stroke="#41b883" stroke-width="2" fill="#41CEC0" transform="translate(420, 315) rotate(45)"></rect>

STEP 3: 將方形移回原本的位置

最後,我們一樣透過 translate ,把原本位移的距離在扣回去,就可以讓旋轉後的物體回到原本的位置:

1
2
3
<!--   STEP3: 移回原本的位置   -->
<!-- translate(-420, -315) -->
<rect x="400" y="300" width="40" height="30" stroke="#41b883" stroke-width="2" fill="#41CEC0" transform="translate(420, 315) rotate(45) translate(-420, -315)"></rect>

這樣就完成了原地旋轉。


其實如果你知道怎麼計算旋轉的中心點後,也可以一器合成的把它寫在 rorate 裡面,對多數人來說,這樣的作法也比較直觀好想像,我們只需要在 rotate(角度, 旋轉中心X, 旋轉中心Y) 裡面給定旋轉的中心點就可以了。

像是這樣子:

1
2
3
 <!--   直接把旋轉中心點給在 rotate 之中   -->
<!-- rotate(45, 420, 315) -->
<rect x="400" y="300" width="40" height="30" stroke="#41b883" stroke-width="2" fill="#41CEC0" transform=" rotate(45, 420, 315)"></rect>

一樣可以達到原地旋轉的效果,但是如果你以後看到那種先位移再旋轉,之後再位移的作法,你也可以知道它背後的意義和邏輯了。

掃描二維條碼,分享此文章