带有 SVG 的 JS：围绕其中心旋转 SVG-Element答案

【问题标题】：JS with SVG: Rotate SVG-Element around its center带有 SVG 的 JS：围绕其中心旋转 SVG-Element
【发布时间】：2013-12-11 18:16:07
【问题描述】：

我必须使用 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/

【问题讨论】：

你的小提琴不工作。

标签： javascript svg rotation

【解决方案1】：

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

ps：Raphaël 的作者提供的最新和重新设计的库是 http://snapsvg.io/，以防您可以使用。

【讨论】：

【解决方案2】：

对于 SVG，一定要使用第三方库。 SVG 是纯 javascript 的痛苦。我的建议：肯定选择D3js，我已经在工作场所使用了一年，它很棒：动态、良好的社区、出色的文档。

请参阅以下示例，其中心旋转圆圈称为天文馆：Planetarium 在没有动画的情况下按照您的意愿进行旋转。它使用 D3- 计时器，仅此而已。

那里有很多示例，因此请在此处阅读完整示例列表：d3js Full list of examples

【讨论】：