## Rotation Anchor

Expand Messages
• Hi everyone, Apologies if I ve missed this somewhere in any documentation or in previous postings, but what is the most popular way of creating and rotating
Message 1 of 2 , Aug 1, 2005
Hi everyone,

Apologies if I've missed this somewhere in any documentation or in
previous postings, but what is the most popular way of creating and
rotating symbols?

From what I can see the best method is create a symbol at (0,0) and
then instantiate it via a use element elsewhere on the page. Is there
a significant drawback in creating a new symbol each time you want to
create one with the correct rotation, placement etc?

The main reason I ask is that when rotating a use symbol, it appears
to rotate around one of the corners, therefore actually moving the
element to the wrong location. Is there a simple method of rotating a
use element around a particular point of that element (i.e. centre)?

Ideally, I just want it to rotate around the centre of the use
element, to effectively "spin" it on it's centrepoint.

Again, apologies if this is answered elsewhere.

Jason
• ... Hi Jason rotate() expects one or 3 parameters, if you provide 3 the last two are the center of rotation. to calculate the center of a use element, is
Message 2 of 2 , Aug 1, 2005
jasonsfoster schrieb:

> Hi everyone,
>
> Apologies if I've missed this somewhere in any documentation or in
> previous postings, but what is the most popular way of creating and
> rotating symbols?
>
> >From what I can see the best method is create a symbol at (0,0) and
> then instantiate it via a use element elsewhere on the page. Is there
> a significant drawback in creating a new symbol each time you want to
> create one with the correct rotation, placement etc?
>
> The main reason I ask is that when rotating a use symbol, it appears
> to rotate around one of the corners, therefore actually moving the
> element to the wrong location. Is there a simple method of rotating a
> use element around a particular point of that element (i.e. centre)?
>
> Ideally, I just want it to rotate around the centre of the use
> element, to effectively "spin" it on it's centrepoint.
>
> Again, apologies if this is answered elsewhere.
>
> Jason

Hi Jason

rotate() expects one or 3 parameters, if you provide 3 the last two are
the center of rotation.
to calculate the center of a use element, is cx=x+width/2; cy=y+height/2.

<use x="50" y="100" xlink:href="#ms" width="50" height="50"
transform="rotate(45,75,125)"/>
the above example is equivalent to this syntax,

<use x="50" y="100" xlink:href="#ms" width="50" height="50"
transform="translate(75,125) rotate(45) translate(-75,-125)" fill="red"/>

which you will need to scale at a specific point.

hth
Holger
Your message has been successfully submitted and would be delivered to recipients shortly.