Question

我必须使用JavaScript而不是<animation>标记围绕其中心旋转三个SVG对象。树顶部的大星正确旋转，但是从其他星上我找不到中心坐标。

这是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

围绕中心旋转，您需要先翻译它：Rotate rectangle around its own center in SVG

ps：来自Raphaël作者的最新和重写的lib是http://snapsvg.io/，以防你可以使用它。

Answer 2

对于SVG，肯定使用第三方库。 SVG是一个简单的JavaScript的痛苦。我的建议：肯定去D3js，我已经在我的工作场所使用了一年，这很棒：动态，良好的社区，精彩的文档。

请参阅以下示例，在其中心周围旋转圆圈，称为Planetarium：Planetarium旋转是否没有动画，如您所愿。它使用D3计时器，就是这样。

那里有很多例子，请阅读完整的示例列表：d3js Full list of examples

JS与SVG：围绕其中心旋转SVG-Element

2 个答案: