Rotation d'un rectangle autour de son propre centre en SVG

Question

J'ai le morceau de code suivant :

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

Lorsque je translate un rectangle sans rotation, cela fonctionne correctement. Mais lorsque je le fais pivoter, je veux le faire pivoter autour de son axe central. Que dois-je passer à l'attribut rotate ?

Answer 1

Vous devez définir le centre comme étant le centre de l'élément rempli. Comme ceci :

svg .rotate {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg);
}

Answer 2

Il suffit d'ajouter la moitié de la largeur/hauteur du rectangle pour obtenir son centre.

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

Voir transformer la documentation de la fonction de rotation pour plus d'informations.

Answer 3

La réponse acceptée fonctionne si vous dessinez le rectangle à partir du point (0,0). ce qui était le cas du PO . Mais pour moi, ce n'était pas le cas !

Voici ce qui a fonctionné pour moi :

• Pour obtenir les coordonnées du rectangle, j'ai utilisé $('#rectID').getBBox() devrait renvoyer [ rect-height , rect-width , rect-y , rect x ]
• Le point central est ( rect-x + (rect-largeur/2) , rect-y + (rect-hauteur/2) )

Voici un extrait que j'ai utilisé dans la console du navigateur :

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

Answer 4

Origine
x = x + width / 2
y = y + height / 2
aquí
x est égal à 10
y est 10
la largeur est de 120
la hauteur est de 120

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

Answer 5

Je sais que c'est un vieux post mais s'il y a des gens qui cherchent à rendre les valeurs modifiables en dehors de l'élément de groupe

    const centerX=100;
    const centerY=100;
    const firstAngle=45;
    const secondAngle=60;
    const thirdAngle =60;

    <g transform ={`translate(${centerX}, ${centerY}) rotate(${firstAngle} ${secondAngle}, 
    ${thirdAngle})`}>