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

Manipulating SVG in HTML using JavaScript

Expand Messages
  • Jason
    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
    Message 1 of 4 , May 18, 2012
      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.

      Here is what it should look like: http://evony.net23.net
      Here is the code that's not working: http://evony.net23.net/maps.htm

      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.

      Any suggestions would be appreciated.

      Jason
    • th_w@ymail.com
      ... 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
      Message 2 of 4 , May 22, 2012
        --- In svg-developers@yahoogroups.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


        >
        > 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):

        <?xml version="1.0" encoding="UTF-8"?>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="540" width="540">
        <style type="text/css">
        text {fill:black; font-size:16; font-weight:bold; text-anchor:end;}
        line {stroke:#C0C0C0;}
        </style>
        <defs>
        <rect id="marker" width="6" height="6"/>
        <pattern id="grid" width="45" height="45" patternUnits="userSpaceOnUse" viewBox="-22.5 -22.5 45 45">
        <line x1="-22.5" x2="22.5"/>
        <line y1="-22.5" y2="22.5"/>
        <use xlink:href="#marker" x="-3" y="-3" fill="red"/>
        </pattern>
        </defs>
        <g transform="translate(28)">
        <text y="56">207</text>
        <text y="101">225</text>
        <text y="116">231</text>
        <text y="146">243</text>
        <text y="191">261</text>
        <text y="236">279</text>
        <text y="278">297</text>
        <text y="292">300</text>
        <text y="326">315</text>
        <text y="371">333</text>
        <text y="416">351</text>
        <text y="446">363</text>
        <text y="461">369</text>
        <text y="506">387</text>
        </g>
        <g transform="rotate(-90) translate(0,5)">
        <text y="40">603</text>
        <text y="85">621</text>
        <text y="100">627</text>
        <text y="130">639</text>
        <text y="175">657</text>
        <text y="220">675</text>
        <text y="265">693</text>
        <text y="283">700</text>
        <text y="310">711</text>
        <text y="355">729</text>
        <text y="400">747</text>
        <text y="430">759</text>
        <text y="445">765</text>
        <text y="490">783</text>
        </g>
        <line y2="540" x2="100" y1="31" x1="100"/>
        <line y2="110" x2="540" y1="110" x1="31"/>
        <line y2="540" x2="265" y1="31" x1="265"/>
        <line y2="275" x2="540" y1="275" x1="31"/>
        <line y2="540" x2="283" y1="31" x1="283"/>
        <line y2="283" x2="540" y1="283" x1="31"/>
        <line y2="540" x2="430" y1="31" x1="430"/>
        <line y2="440" x2="540" y1="440" x1="31"/>
        <rect fill="url(#grid)" height="509" width="509"
        x="13" y="4" transform="translate(18,27)"/>
        <g fill="green">
        <use y="107" x="97" xlink:href="#marker"/>
        <use y="107" x="262" xlink:href="#marker"/>
        <use y="107" x="427" xlink:href="#marker"/>
        <use y="272" x="97" xlink:href="#marker"/>
        <use y="272" x="427" xlink:href="#marker"/>
        <use y="437" x="97" xlink:href="#marker"/>
        <use y="437" x="262" xlink:href="#marker"/>
        <use y="437" x="427" xlink:href="#marker"/>
        </g>
        <use fill="blue" y="280" x="280" xlink:href="#marker"/>
        </svg>
      • Jason Barnabas
        From: th_w@ymail.com ... Thank you. That is just the sort of thing I need. I understand the math and doing the JavaScript is no problem.
        Message 3 of 4 , May 31, 2012
          From: "th_w@..." <th_w@...>


          > "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
        • 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 4 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.