Ruota rettangolo intorno al proprio centro in SVG

Question

Ho seguito pezzo di codice:

<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> 

Quando traduco rettangolo senza rotazione, si sta lavorando bene. Ma quando lo ruoto, volevo ruotarlo attorno al suo asse centrale. Cosa devo passare per ruotare l'attributo?

Answer 1

È sufficiente aggiungere metà della larghezza/altezza del rettangolo per ottenere il centro.

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

Vedere transform documentation della funzione di rotazione per ulteriori informazioni.

Answer 2

La risposta accettata funziona se si disegna il rettangolo a partire dal punto (0,0) che era il caso OP. Comunque per me non lo era!

Ecco cosa ha funzionato per me:

• Per ottenere le coordinate del rettangolo ho usato $('#rectID').getBBox() metodo, dovrebbe restituire [rect-altezza, rect-width, rect-y, rect x]
• il punto centrale è (rect-x + (rect-width/2), rect-y + (rect-altezza/2))

Ecco un frammento ho usato sulla console del browser:

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