CODEWITHSUNDEEP
javascriptsvgrotation
sumisu
sumisu

Reputation: 135

JS with SVG: Rotate SVG-Element around its center

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.net/F325k/

Upvotes: 3

Views: 15744

Answers (2)

Markus
Markus

Reputation: 2274

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.

Upvotes: 3

Amir Rahnama
Amir Rahnama

Reputation: 6214

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 community, 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

Upvotes: 2

Related Questions