JS與SVG：圍繞其中心旋轉SVG元素

Question

我必須使用JavaScript旋轉三個SVG對象，而不是使用<animation>標記。樹頂部的大明星旋轉正確，但從其他人中我找不到中心座標。

這是繼星和JS旋轉：

star2.setAttribute("transform", "rotate(" + angle + " 2000 200)"); 

，這是SVG：

<defs> 
    <symbol id="stern"> 
     <polygon points="1000 50 1100 310 850 160 1150 160 900 310 1000 50" fill="yellow" /> 
    </symbol> 
</defs> 

<use id="stern2" xlink:href="#stern" transform="translate(500,600) scale(0.5)" onmouseover="rotate2();" onmouseout="stop();" /> 

這裏是一個小提琴：

http://jsfiddle.net/F325k/

Answer 1

對於SVG，明確使用第三方庫。 SVG是一個簡單的JavaScript的痛苦。我的建議：一定要去D3js，我一直在我的工作場所使用它一年，它很棒：動態，良好的社區，輝煌的文檔。

看到下面的例子，圍繞其中心稱爲天文館的旋轉圓：Planetarium沒有動畫的旋轉是你想要的。它使用D3定時器，就是這樣。

有很多的例子有，所以在這裏閱讀完整的示例列表：d3js Full list of examples

Answer 2

繞中心旋轉，你需要首先翻譯：Rotate rectangle around its own center in SVG

PS：最新的和重新設計的lib Raphaël的作者是http://snapsvg.io/以防你可以使用它。