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/以防你可以使用它。