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

当我翻译没有旋转的矩形时，它能够正常工作。但是当我旋转它时，我想让它围绕其中心轴点旋转。我需要传递什么参数到旋转属性？

- Vinay Bagale

---

有两个具有相同ID（myRect）的元素会引起问题。 - Robert Longson

注意：您可以使用transform-origin作为替代方案。它是应用变换（旋转，平移，缩放，倾斜）的点。 - Eduard Kolosovskyi

Answer 1

您需要将填充元素的中心设置为中心。就像这样：

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

- bjoster

---

“transform-box: fill-box”：感谢您挽救了我的一天。 - Rehmat

我使用 transform-origin: 32px 40px; transform: rotate(45deg); 让我的 SVG 中的一行正常工作了。我需要移除 transform-box，而 32 是该行在 X 轴上的中心位置，40 是该行在 Y 轴上的底部位置（因为它是从底部旋转的垂直线）。 - Justin

@vinay-bagale 这应该是被接受的答案 ;) - lbrutti

“transform-box: fill-box” 是我一直缺少的。非常感谢！ - user3107036

太棒了。我经常使用Image来旋转动画。SVG需要这样才能正确旋转。谢谢。 - Phong

对我来说，在删除 transform-box 后添加 transform-origin 就可以了。 - Justin

Answer 2

只需加上矩形宽度/高度的一半，即可得到其中心点。

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

请参阅旋转函数的变换文档以获取更多信息。

- Robert Longson

---

请注意，语法是“rotate(度数 x y)”，因此如果您的矩形例如居中于100x100的viewBox中，则旋转45度的语法为rotate(45 50 50)，不应该使用“半个宽度/高度”的方式计算。 - Ciantic

补充一下这个答案，如果你只有一个形状，你可以直接将 transform 属性应用到 <rect/> 元素上，不需要使用 <g/>（组）。我对 SVG 标准还很陌生，这对我来说并不是显而易见的，也许它会帮助某些人节省时间。 - Illya Moskvin

另外，有一件对我有帮助的事情是，如果你的svg写着viewBox="0 0 23 19"，那么你必须将其除以二，例如这样：transform="rotate(180 11.5 9.5)以翻转它并倒置。 - Rock Lee

Answer 3

如果你想从点（0,0）开始绘制矩形，接受的答案可以工作这是OP的情况。 然而对于我来说不是这样！

以下是对我有用的方法：

• 要获取矩形坐标，我使用了$('#rectID').getBBox()方法，应该返回[矩形高度，矩形宽度，矩形y，矩形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)

- Nimir

---

OP甚至没有提到这将在浏览器中显示，JavaScript与此有什么关系？更不用说jQuery了... - Nathan Hornby

Answer 4

起始点
x = x + width / 2
y = y + height / 2
在这里
x 值为 10
y 值为 10
width 值为 120
height 值为 120

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

- SUDHIR KUMAR

---

谢谢，这个答案是帮助我最好理解的答案！ - Iain Collins

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})`}>

- alittleloopy

Answer 6

没什么，你只需要用 JavaScript 中的元素编写以下代码：

element.rotate(angle Degree);

- Kshitiz singhal

---

在你的例子中，“element”是什么？SVGElement没有“rotate”方法。 - Sidney