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
    • 0 Attachment
      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
      • 0 Attachment
        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.