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

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

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

有关详细信息，请参阅旋转功能的transform documentation。

Answer 2

如果您从点（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 3

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

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

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

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

6 个答案: