円の中心点で矩形を回転させる方法

Question

私は中心点を中心に矩形を回転しようとしますが、どのように動作しているのか理解できません。 svgには、Cos Sin関数や複雑なコードがなくても問題のある単純なコードがありますか？ 私はいくつかのテストの後に試して、私は最終的にはsucssesしかし、私はretangleのサイズを変更したい場合や、中央ページにすべてを混乱させるために、私はそれを行う方法を私に与えることができますか？ありがとう。 jsfiddle.net

私のコード：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<rect x="10" y="10" height="100" width="100" 
     style="stroke:#FF0000; fill: #9C4100"> 

     <animateTransform 
      attributeName="transform" 
      begin="0s" 
      dur="40s" 
      type="rotate" 
      from="0 60 60" 
      to="360 60 60" 
      repeatCount="1" 
     /> 
    </rect> 
<circle id="pointA" cx="60" cy="60" r="48" /> 
</svg>​ 

Answer 1

センターあなたのオリゴ上の画像と、それらが所望の位置に "変換"。 私はあなたがこのようなものを望むと信じています。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<g transform="translate(250,200)"> 
    <rect x="-50" y="-50" height="100" width="100" 
    style="stroke:#FF0000; fill: #9C4100"> 

    <animateTransform 
     attributeName="transform" 
     begin="0s" 
     dur="20s" 
     type="rotate" 
     from="0" 
     to="360" 
     repeatCount="1" 
    /> 
    <animateTransform attributeName="transform" 
    type="scale" from="1" to="2" 
    additive="sum" begin="0" dur="20s" fill="freeze"/> 
    </rect> 
    <circle id="pointA" cx="0" cy="0" r="48" /> 
</g> 
</svg>