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

当我平移矩形而不旋转时，它工作正常。但是，当我旋转它时，我想绕其中心轴点旋转它。我需要通过什么来旋转属性？

最佳答案

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

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

有关更多信息，请参见rotate函数的transform documentation。