javascript - 带有 SVG 的 JS : Rotate SVG-Element around its center

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();" />

这是一个 fiddle :

http://jsfiddle.net/F325k/

Answer 1

要围绕中心旋转，您需要先对其进行平移:Rotate rectangle around its own center in SVG

ps:来自 Raphaël 作者的最新和重做的库是 http://snapsvg.io/以防万一。