如何使用jQuery SVG移动SVG？

我已经写在JavaScript方法如下：如何使用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（）来获取'布局'。如何完成效果？

-----更新（2011年9月25日）------

我把它用下面的代码工作。由于贾森小费我送行的问题：

<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>

来源

2011-09-25 TERACytE

如果你想获得一个div在整个窗口移动，无论它是否包含SVG与否，确保其position是absolute在CSS。然后，您可以使用jQuery为left和top属性制作动画。

来源

2011-09-25 14:16:11

谢谢指出我的错误:) – TERACytE

如何使用jQuery SVG移动SVG？

回答

相关问题