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