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

我尝试围绕他的中心点旋转矩形，但我无法理解它是如何工作的。 svg中是否存在简单的代码，这使得没有Cos Sin函数或复杂代码的问题。我尝试了一些很多的测试后，我终于忍不住了，但如果我想调整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>

来源

2012-03-15 user1255490

见http://stackoverflow.com/questions/6711610/how-to-set-transform-origin-in-svg – j08691 2012-03-15 22:15:38

感谢这就是我要找 – user1255490 2012-03-15 22:25:08

中心您的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>

来源

2012-03-29 18:48:22 user939955

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

回答

相关问题