SVG 및 JS로 조절 가능한 속성이있는 본체

Question

인체를 선으로 만들어야합니다. SVG, HTML 및 JavaScript를 사용해야하며 머리, 팔, 허리, 다리의 크기를 동적으로 변경해야한다는 것을 염두에두고 어떤 요소를 사용해야하는지 궁금합니다. 몸 전체. 또한 창 크기에 비례해야합니다. 감사합니다

Answer 1

당신은 을 HTML, JavaScript, SVG이라고 말했습니다.

HTML :보다 단지 이미지와 다른 태그를 작성하는 등의 태그를 생성하고 브라우저에서 몸을 읽을 수 있도록하고, 단지 사용되는 자바 스크립트 :은 마지막의 확인하는 데 사용됩니다 창 크기를 사용하여 :

window.width; window.height; 

당신은 또한 jQuery를 사용하여, 기억! 간단하고 쉽습니다! 그리고 당신의 일에 빠르고 효율적으로 일할 것입니다. http://api.jquery.com을하고 난 항상 클릭하고 창 크기 변경, 창 위치와 같은 다른 이벤트에 대한 jQuery를 사용하여 선호하며, 호버 같은 다른 마우스 커서를 가져다 대면 :

의 jQuery API는 자바 스크립트 프레임 워크입니다, 당신은 여기에 대해 배울 수 있습니다! 따라서 해당 섹션의 골격 내용을 볼 수 있습니다.

는 "그것은 크기를 바꿀 것"언급되는 창 일이 이렇게 될 것입니다 : 사용 jQuery를 :

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

무엇 할 것 SVG, 그것은 확장에 어떤 문제가 발생하지 것입니다 이미지. 확대하면 일반 이미지가 픽셀 화됩니다. 그러나 SVG는 스켈레톤 작업에 사용되지 않으므로 SVG는 이미지 표현에 좋은 아이디어입니다.

사용이 너무 (어쩌면 제안로만은) :

그러나, 당신은 또한 너무 좀 더 많은 자원이 필요합니다. 일부는 Ajax를 좋아합니다! 이미지의 메타 데이터를로드합니다. 한 번의 요청으로 모든 그래프와 해당 데이터를로드 할 수 없다는 뜻입니다.

: 사용자가 머리를 클릭하면

가, 그 다음 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! 
     } 
    }) 
}) 

그러면 데이터가로드됩니다. 이 제안은 사이트 로딩 속도를 높이기 위해 만들어졌습니다!