Question

我必须用线条创造一个人体。我必须使用SVG，HTML和JavaScript，我想知道我应该使用哪些元素，记住我必须使它动态改变头部，手臂，腰部和腿部的大小，这一定不能弄乱结构和比例的整个身体。它还必须与窗口大小成比例。感谢

Answer 1

您提到了 HTML，JavaScript，SVG 。

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

window.width; window.height;

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

jQuery API是一个JavaScript框架，您可以在这里了解它：http://api.jquery.com我总是更喜欢使用jQuery进行点击和其他事件，例如窗口大小更改，窗口位置以及其他像hover，mouseover ！这样您就可以查看该部分的骨架内容。

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

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

SVG 会做什么，它不会在缩放图像时造成任何问题。放大时，正常图像会像素化。但是SVG在骨骼工作中不会这样，SVG对于图像表示来说是个好主意。

也可以使用此功能（仅限建议）：

但是，您还需要更多资源。有些像Ajax！加载图像的元数据。我的意思是你无法在一个请求中加载所有图形及其数据。我更喜欢使用Ajax，从Server加载某些元数据，假设如下：

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

之类的头部ID

对于此事件，请将ajax调用为：

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

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

具有SVG和JS可调属性的主体

1 个答案: