在SVG中围绕自己的中心旋转矩形 [英] Rotate rectangle around its own center in 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>

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

When I translate rectangle without rotation, it is working fine. But when I rotate it, I wanted to rotate it around its center axis point. What should I need to pass to rotate attribute?

推荐答案

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

You just need to add half the width/height of the rectangle to get its centre.

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

有关更多信息，请参见旋转功能的转换文档.

See transform documentation of the rotate function for more information.

这篇关于在SVG中围绕自己的中心旋转矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！