2011-09-25 8 views
0

본인은 자바 스크립트 방법으로 다음과 같은 쓴 : jQuery SVG를 사용하여 SVG를 이동하는 방법은 무엇입니까?

<html> 
... 
<script type="text/javascript" charset="utf-8"> 

$(function() { 

    $('#layout').svg({}); 

    var svg = $('#layout').svg('get'); 
    svg.rect(150, 50, 100, 50, 10, 10, {fill: 'grey'}); 
    svg.text(200, 75, "Some Text", {'font-family':"Verdana", 'font-size':20, 'text-anchor':"middle", 'fill':"#00ff00"});    

    $('#layout').click(function(e) { 
     $(this).slideDown("slow");      
    }); 
} 
... 
<body> 
    <div id="layout" style="width: 640px; height: 480px;"></div> 
</body> 
</html> 

가 궁극적으로 내가 브라우저 창을 가로 질러 이동하는 '레이아웃'을 얻기 위해 노력하고 있어요. 그러나 어쨌든 slideDown() 또는 animate()를 사용하여 'layout'을 움직일 수는 없습니다. 효과를 얻는 방법?

----- 업데이트 (9 월 (25), 2011) ------

는 나는 다음 코드를 사용하여 작업을 얻었다. 이 문제에 나를 내려 팁을위한 제이슨에게 감사 :

<html lang="en"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"> 

... 

    <style type="text/css"> 
     #layout { 
      background: #6699FF; 
      height: 480px; 
      width: 640px; 
      position: relative; 
     } 
     </style>  

    <script type="text/javascript" charset="utf-8"> 

     $(function() { 
      $('#layout').svg({}); 

      var svg = $('#layout').svg('get'); 
      svg.rect(150, 50, 100, 50, 10, 10, {fill: 'grey'}); 

      svg.text(200, 75, "SomeText", {'font-family':"Verdana", 'font-size':20, 'text-anchor':"middle", 'fill':"#00ff00"}); 

      $('#layout').click(function(e) { 
       $("#layout").animate({opacity: "0.1", left: "-=800"}, 500);     
      }); 
     });   

    </script> 
</head> 
<body> 
    <div id="layout"></div>    
</body> 
</html> 

답변

2

당신이 SVG를 포함하거나하지 않을 경우, 그 position가에 absolute 있는지 확인에 관계없이 전체 화면을 가로 질러 이동하는 사업부를 얻으려고 노력하는 경우 CSS. 그런 다음 lefttop 속성에 jQuery로 애니메이션을 적용 할 수 있습니다.

+0

내 실수를 지적 해 주셔서 감사합니다. :) – TERACytE

관련 문제