如何在圓的中心點旋轉矩形

我嘗試圍繞他的中心點旋轉矩形，但我無法理解它是如何工作的。 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

如何在圓的中心點旋轉矩形

回答

相關問題