javascript - Body with adjustable properties with SVG and JS

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

您提到了 HTML、JavaScript、SVG。

HTML:仅用于创建标签并使正文在浏览器中可读，更像是编写图像和其他标签，JavaScript:将用于确保您的最后一件事，窗口大小使用：

window.width; window.height;

请记住，您也可以使用 jQuery！这很简单！并将为您的工作快速高效地工作。

jQuery API 是一个 JavaScript 框架，你可以在这里了解它：http: //api.jquery.com，我总是更喜欢使用 jQuery 来处理点击和其他事件，比如窗口大小变化、窗口位置以及悬停等其他事件，鼠标移到！这样您就可以查看该部分的骨架内容。

您提到的“它会改变它的大小”的 Window 事情将是这样的：使用 jQuery：

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

SVG会做的是，它不会在缩放图像时造成任何问题。当您放大时，普通图像会像素化。但是 SVG 在您的骨架工作中不会如此，SVG 将是图像表示的好主意。

也使用它（也许仅作为建议）：

但是，您还需要更多资源。有些人喜欢阿贾克斯！加载图像的元数据。我的意思是您不能在一个请求中加载所有图表及其数据。我更喜欢使用 Ajax 从服务器加载某些元数据，假设如下：

当用户点击 head 时，该 div 应该有 head 的 id<div id="head"...

对于此事件，请进行 ajax 调用：

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

这将加载数据。提出这个建议只是为了加快网站的加载速度！