Loading ...
Sorry, an error occurred while loading the content.
 

Rotation Anchor

Expand Messages
  • jasonsfoster
    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.

      Thanks in advance,
      Jason
    • Holger Will
      ... 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.
        >
        > Thanks in advance,
        > 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.