85

次のコードがあります：

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

回転せずに長方形を翻訳すると、うまくいきます。しかし、回転させるときは、中心軸を中心に回転させたいと思っていました。回転属性に何を渡す必要がありますか?

4

6 に答える 6

82

長方形の中心を取得するには、長方形の幅/高さの半分を追加するだけです。

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

詳細については、回転関数の変換ドキュメントを参照してください。

于 2013-02-28T15:15:27.487 に答える
39

OPケースであったポイント（0,0）から始まる長方形を描いている場合、受け入れられた答えは機能します。しかし、私にとってはそうではありませんでした！

これが私のために働いたものです：

  • メソッドを使用した長方形の座標を取得するには、 [ rect-height 、 rect-width 、 rect-y 、 rect x ]$('#rectID').getBBox() を返す必要があります
  • 中心点は ( 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)
于 2015-08-17T07:49:40.060 に答える
4


x = x + width / 2
y = y + height / 2
ここの原点
x は 10
y は 10
幅は 120
高さは 120

<g transform = "translate(100, 100) rotate(45 70 70)">
于 2020-06-16T08:00:02.047 に答える