[解決済み] 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>

矩形を回転させずに平行移動させた場合は、問題なく動作しています。しかし、私はそれを回転させるとき、私はその中心軸の点の周りにそれを回転させたいと思いました。rotate属性に何を渡す必要がありますか？

どのように解決するのですか？

矩形の幅/高さの半分を足して、その中心を求めればよいのです。

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

参照 トランスフォームドキュメント を参照してください。