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

RE: [svg-developers] Re: Manipulating SVG in HTML using JavaScript

Expand Messages
  • A.J.Brasher
    Hi Jason ... You can use the transform attribute to achieve this http://www.w3.org/TR/SVG/coords.html#TransformAttribute e.g.
    Message 1 of 4 , Jun 1, 2012
      Hi Jason

      >Is there a way to move a group from one set of coordinates
      >to another? For example if the grid were originally placed
      >x=0 y=0 width=540 height=540 would it be possible to change
      >the x and y values

      You can use the transform attribute to achieve this

      http://www.w3.org/TR/SVG/coords.html#TransformAttribute

      e.g.

      <g id="gr1" transform="translate(85,0)"> <!-- rest of group contents here -->

      will translate the whole group 85 in the x direction, 0 in the y direction. You leave the co-ords of the component elements within the group <g> itself alone.

      Andrew
      ________________________________
      From: Jason Barnabas [mailto:jtbarnabas@...]
      Sent: 31 May 2012 22:15
      To: svg-developers@yahoogroups.com
      Subject: Re: [svg-developers] Re: Manipulating SVG in HTML using JavaScript



      From: "th_w@...<mailto:th_w%40ymail.com>" <th_w@...<mailto:th_w%40ymail.com>>

      > "Jason" <jtbarnabas@...> wrote:
      > >

      > > I have a project I'm working on. My goal is to display
      > > 18 images in a single HTML document in the same space.
      > > The first is just text and is put in using standard
      > > HTML. Over that I have placed a SVG image and I'd like
      > > to do drawings in it using JavaScript. I only want one
      > > server call for the entire map set. I know how to do
      > > the math to get the images and text in the SVG but I
      > > can't get the JavaScript to do the drawings.
      >
      > What exactly do you mean by this? You can create, modify,
      > delete and insert nodes using the standard DOM methods.
      > I'm not sure what's a good English reference, maybe have
      > a look here:
      >
      > https://developer.mozilla.org/en/Gecko_DOM_Reference

      Thank you. That is just the sort of thing I need. I
      understand the math and doing the JavaScript is no problem.
      Once I figure out how DOM works I should be on track.

      > > The one that works is 18 different pages and takes up
      > > over 175kb of file space. The one that doesn't work yet
      > > will be less than 10kb.
      >
      > If your goal is to save space, I'd suggest using more
      > organized SVG. Good ideas would be to use a pattern for
      > the background grid and avoid repeated style and
      > transformation attributes, maybe like this (it's a
      > modified version of your Moravia diagram):

      <snipped an excellent illustration>

      The use element was foreign to me when I wrote the program
      that wrote the files for the working version of my project.
      Thank you very much for showing me how that could work. I
      can make a grid that will have slightly different placement
      in each map (diagram) and keep the central element the same
      from one to the other.

      Is there a way to move a group from one set of coordinates
      to another? For example if the grid were originally placed
      x=0 y=0 width=540 height=540 would it be possible to change
      the x and y values?

      Maybe I should go ahead and dig into how the DOM works. That
      will probably give me the answer I'm looking for.

      Again, thanks for the suggestions, they were golden.

      Jason




      --
      The Open University is incorporated by Royal Charter (RC 000391), an exempt charity in England & Wales and a charity registered in Scotland (SC 038302).


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