svg - 在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)">

有关详细信息，请参阅旋转函数的转换文档。

Answer 3

如果您从点 (0,0) 开始绘制矩形，则接受的答案有效，这是 OP case。然而对我来说不是！

这对我有用：

• 要获取我使用的$('#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)">

Answer 5

我知道这是一篇旧帖子，但是如果有人正在寻找使值可以在组元素之外修改

    const centerX=100;
    const centerY=100;
    const firstAngle=45;
    const secondAngle=60;
    const thirdAngle =60;
  
    <g transform ={`translate(${centerX}, ${centerY}) rotate(${firstAngle} ${secondAngle}, 
    ${thirdAngle})`}>

Answer 6

您只需要在 javascript 中使用该元素编写以下代码即可：

element.rotate(angle Degree);