如何在圆的中心点旋转矩形答案

【问题标题】：how to rotate rectangle in the centeral point of the circle如何在圆的中心点旋转矩形
【发布时间】：2012-03-15 22:13:36
【问题描述】：

我尝试围绕他的中心点旋转矩形，但我不明白它是如何工作的。 svg 中是否有简单的代码可以在没有 Cos Sin 函数或复杂代码的情况下解决问题。经过大量测试后，我尝试并最终成功，但是如果我想调整重新调整的大小或将其移动到中心页面，一切都会变得一团糟，你能告诉我该怎么做吗？谢谢。 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>

【问题讨论】：

见stackoverflow.com/questions/6711610/…
谢谢我正在寻找的东西

标签： animation svg transform

【解决方案1】：

将您的图像放在 origo 上并将它们“转换”到所需位置。我相信你想要这样的东西；

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

【讨论】：