Javascript 如何使用jQuery SVG移动SVG？_Javascript_Jquery_Html_Svg

Javascript 如何使用jQuery SVG移动SVG？

javascript jquery html svg

Javascript 如何使用jQuery SVG移动SVG？,javascript,jquery,html,svg,Javascript,Jquery,Html,Svg,我用JavaScript方法编写了以下内容： <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,

我用JavaScript方法编写了以下内容：

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


...
$（函数（）{
$（'#layout'）.svg（{}）；
var svg=$（'#layout'）.svg（'get'）；
rect（150,50,100,50,10,10，{fill:'grey'}）；
text（200,75，“一些文本”，{'font-family'：“Verdana”，'font-size'：20，'text-anchor'：“middle”，'fill'：“#00ff00”}）；
$（“#布局”）。单击（函数（e）{
$（这个）。向下滑动（“慢”）；
});
}
...

最终，我试图让“布局”在浏览器窗口中移动。但是，我无法使用slideDown（）或animate（）使“布局”在浏览器窗口中移动。如何实现此效果

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

我使用以下代码实现了它。感谢Jason向我提供了有关该问题的信息：

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


...
#布局{
背景：#6699FF；
高度：480px；
宽度：640px；
位置：相对位置；
}
$（函数（）{
$（'#layout'）.svg（{}）；
var svg=$（'#layout'）.svg（'get'）；
rect（150,50,100,50,10,10，{fill:'grey'}）；
text（200,75，“SomeText”，{'font-family'：“Verdana”，'font-size'：20，'text-anchor'：“middle”，'fill'：“#00ff00”}）；
$（“#布局”）。单击（函数（e）{
$（“#布局”）.animate（{不透明度：“0.1”，左：“-=800”}，500）；
});
});

如果您试图让div在整个窗口中移动，不管它是否包含SVG，请确保它的

位置在CSS中是绝对的。然后可以使用jQuery设置左和顶属性的动画