javascript - JS with SVG: Rotate SVG-Element around its center - Stack Overflow

admin管理员组

文章数量:1302404

I have to rotate three SVG-Objects around its center with JavaScript and not the <animation> tag. The big star at the top of the tree rotates correctly, but from the others I don't find the center coordinates.

This is the second star and the rotation in JS:

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

and this is the 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();" />

Here is a fiddle:

/

I have to rotate three SVG-Objects around its center with JavaScript and not the <animation> tag. The big star at the top of the tree rotates correctly, but from the others I don't find the center coordinates.

This is the second star and the rotation in JS:

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

and this is the 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();" />

Here is a fiddle:

http://jsfiddle/F325k/

• javascript
• svg
• rotation

Share Follow edited Dec 11, 2013 at 10:10 sumisu asked Dec 11, 2013 at 9:40 sumisusumisu 13511 gold badge44 silver badges1212 bronze badges 1

• Your fiddle is not working. – Paul LeBeau Commented Dec 11, 2013 at 22:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

to rotate around the center you need to translate it first: Rotate rectangle around its own center in SVG

ps: the latest and reworked lib from the author of Raphaël is http://snapsvg.io/ in case you can use one.

For SVG, definately use third-party libraries. SVG is a pain with plain javascript. My suggestion: Definately go for D3js, I have been using it for a year at my workplace and it is great: dynamic, good munity, brilliant documentation.

See the following example with spinning circle around its center which is called Planetarium: Planetarium Does the rotation without animation as you wanted. It uses a D3- timer and that is all.

There are a lot of examples there, so read the full example list here: d3js Full list of examples

本文标签： javascriptJS with SVG Rotate SVGElement around its centerStack Overflow