在SVG中围绕其自身中心旋转矩形

Question

我有以下代码:

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

当我翻译矩形而不旋转时,它工作正常.但是当我旋转它时,我想围绕它的中心轴点旋转它.我需要传递什么来旋转属性？

Answer 1

您必须将中心设置为填充元素的中心。像这样：

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

Answer 2

您只需要添加矩形宽度/高度的一半即可获得其中心.

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

有关更多信息,请参阅rotate函数的转换文档.

Answer 3

如果您从点(0,0)开始绘制矩形(OP案例),则接受的答案有效.但对我来说不是!

这对我有用:

• 要获得我使用的$('#rectID').getBBox() 方法的矩形坐标,应返回[ rect-height,rect-width,rect-y,rect x ]
• 中心点是(rect-x +(rect-width/2),rect-y +(rect-height/2))

这是我在浏览器控制台上使用的代码段:

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

Answer 4

原点
x = x + width / 2
y = y + height / 2
在这里
x 是 10
y 是 10
宽度是 120
高度是 120

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