2013-02-28 154 views
21

自己的心我有以下一段代碼:旋轉矩形圍繞SVG

<svg> 

<defs> 
<rect id = "myRect" 
     x = "10" 
     y = "10" 
     height = "120" 
     width = "120" 
     stroke-width = "2px" 
     stroke = "red" 
     fill = "blue" /> 

</defs> 


<g transform = "translate(100,30)"> 
    <use xlink:href = "#myRect" /> 
</g> 

<g transform = "translate(100, 100) rotate(45 ? ?)"> 

    <rect id = "myRect" 
     x = "10" 
     y = "10" 
     height = "120" 
     width = "120" 
     stroke-width = "2px" 
     stroke = "green" 
     fill = "yellow" /> 
</g> 

</svg> 

當我翻譯不旋轉矩形,它工作正常。但是當我旋轉它時,我想旋轉它的中心軸點。我需要通過什麼來旋轉屬性?

+7

具有相同id(myRect)的兩個元素會造成麻煩。 – 2013-02-28 15:12:21

回答

29

你只需要添加一半的矩形的寬度/高度來獲得其中心。

<g transform = "translate(100, 100) rotate(45 60 60)"> 

查看transform documentation的旋轉功能瞭解更多信息。

+8

作爲說明,語法是'rotate(degree x y)',所以如果你的矩形例如是「half width/height」,那麼它就不是「half width/height」。以100x100 viewBox爲中心,然後簡單地旋轉(45 50 50)'。 – Ciantic 2015-12-31 19:59:34

+2

只需添加到此答案,您可以將'transform'屬性直接應用於''元素,如果只有一個形狀,則不需要使用「」(組)。我對SVG標準仍然很陌生,這對我來說並不是很明顯,也許它會爲他們節省一些時間。 – 2017-02-25 16:28:28

24

如果您從點(0,0)(即OP案例)開始繪製矩形,則接受的答案有效。但對我來說不是!

這裏是我工作:

  • 爲了得到直角座標我用$('#rectID').getBBox() 方法,應該返回[矩形高度,矩形寬度,矩形-Y,矩形X]
  • 中心點爲(RECT-X +(矩形寬度/ 2),矩形-γ+(矩形高度/ 2))

這是我的瀏覽器控制檯上使用的一個片段:

var coord = $('#elemID')[0].getBBox(); 
coord.x + (coord.width/2) +' '+ coord.y + (coord.height/2) 
+4

OP甚至沒有提到這將顯示在瀏覽器中,JavaScript與什麼有什麼關係?更不用說jQuery ... – 2017-05-11 13:41:41