Body with adjustable properties with SVG and JS [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist

Closed 8 years ago.

Improve this question

I have to create a human body out of lines. I must use SVG, HTML and JavaScript and I wonder what elements should I use keeping in mind that I have to make it dynamically change the size of the head, arms, waist, legs and that must not mess up the structure and proportion of the entire body. It must also be proportional to the window size. Thanks

Answer 1

You mentioned HTML, JavaScript, SVG.

HTML: would be used just to create the tags and make the body readable in the Browser, and more like just writing the image and other tags, JavaScript: will be used to make sure of your last thing, the window size using:

window.width; window.height;

Remember, you can also use jQuery! That's simple and easy! And will work fastly and effieciently for your work.

jQuery API is a framework of JavaScript, you can learn about it here: http://api.jquery.com and I will always prefer using jQuery for click and other events, like window size change, window position, and others like hover, mouseover! So that you can view the content of the skeleton for that section.

The Window thing, that you mentioned "It would change its size" will be like this: Using jQuery:

if($(window).width() < 960) {
  // zoom out the image
} else {
  // zoom in the image or whatever.
}

What SVG will do, is that it will not cause any issue in scaling the image. Normal image would pixelate when you zoom in. But the SVG won't so in your work for skeleton, SVG would be a good idea for the image representation.

Use this too(Maybe as suggestion only):

However, you will also need some more resources too. Some like Ajax! To load the metadata of the image. I mean you cannot load all of the graph and its data in one request. I would prefer using Ajax, to load certain metadata from Server, suppose like:

When user clicks on head, that div should have id of head like <div id="head"...

For this event make an ajax call as:

$("#head").click(function () {
   $.ajax({
      url: "url_to_load_data",
      data: "body_element=head",
      success: function (result) {
         $("#underhead").html(result); // write the result!
      }
   })
 })

This will load the data. This suggestion was made just to speed up the loading of site!