Поворот прямоугольника вокруг собственного центра в 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>

Когда я переводю прямоугольник без вращения, он работает нормально. Но когда я вращал его, я хотел повернуть его вокруг своей оси. Что мне нужно передать для поворота атрибута?

Ответы

Ответ 1

Вам просто нужно добавить половину ширины/высоты прямоугольника, чтобы получить его центр.

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

Для получения дополнительной информации см. преобразование документации функции поворота.

Ответ 2

Принятый ответ работает, если вы рисуете прямоугольник, начинающийся с точки (0,0), который был операцией OP. Однако для меня это не так!

Вот что сработало для меня:

  • Чтобы получить координаты прямоугольника, я использовал $('#rectID').getBBox() метод должен возвращать [ прямая высота, прямая ширина, rect-y, rect x]
  • Центральная точка (rect-x + (прямоугольная ширина /2), rect-y + (rect-height/2))

Вот фрагмент, который я использовал в консоли браузера:

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