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

RE: [svg-developers] Re: rotating text on its axis

Expand Messages
  • Calvert, Julian
    Hallo Samuel The trick is to note that multiple transform operations are performed from right to left. The first text below is first rotated by 30° then
    Message 1 of 3 , Sep 1, 2003
    • 0 Attachment
      Hallo Samuel
      The trick is to note that multiple transform operations are performed from
      right to left. The first text below is first rotated by 30° then translated
      by (200 200) to get the effect you want.

      <svg width="400" height="400">
      <text text-anchor="middle"
      transform="translate(200 200)rotate(30)">
      translate(200 200)rotate(30)</text>
      <text text-anchor="middle"
      transform="rotate(30)translate(200 200)">
      rotate(30)translate(200 200)</text>
      <circle cx="200" cy="200" r="2" fill="red"/>
      </svg>

      I make my life simpler by centering ojbects, defs etc. around (0 0), which
      makes rotating and scaling easier to control.
      Cheers,
      Julian


      -----Original Message-----
      From: Samuel Dagan [mailto:dagan@...]
      Sent: 31 August 2003 21:11
      To: svg-developers@yahoogroups.com
      Subject: [svg-developers] Re: rotating text on its axis

      --- In svg-developers@yahoogroups.com, "mzand3" <mzand@h...> wrote:
      > I am very confused about how to rotate an object alongs its own
      > origin. When I rotate an object, it appears somewhere far away in
      > the document. I realize I have to combine translate with rotate
      but
      > I can't figure out the exact correlation. Is there any easy
      formula
      > to figure this out?

      Yes, there is!
      You are probably using rotate(angle), which does the rotation around
      the origin (x,y)=(0,0) .
      You could use rotate(angle,centerX,centerY), which does the rotation
      around the point (x,y)=(centerX,centerY).
      Cheers, Samuel



      -----
      To unsubscribe send a message to: svg-developers-unsubscribe@yahoogroups.com
      -or-
      visit http://groups.yahoo.com/group/svg-developers and click "edit my
      membership"
      ----

      Your use of Yahoo! Groups is subject to http://docs.yahoo.com/info/terms/



      [Non-text portions of this message have been removed]
    Your message has been successfully submitted and would be delivered to recipients shortly.