CODEWITHSUNDEEP
javascriptjqueryhtmlsvg
TERACytE
TERACytE

Reputation: 7863

How to move a SVG using jQuery SVG?

I have written the following in a JavaScript method :

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

Ultimately I am trying to get 'layout' to move across the browser window. However I cannot get the 'layout' to move in anyway using slideDown() or animate(). How to I accomplish the effect?

----- Update (September 25, 2011) ------

I got it work with the following code. Thanks to Jason for tipping me off on the problem:

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

Upvotes: 0

Views: 2559

Answers (1)

Jason Barry
Jason Barry

Reputation: 758

If you're trying to get a div to move across the entire window, regardless if it contains SVG or not, make sure its position is absolute in the CSS. You can then animate the left and top properties with jQuery.

Upvotes: 2

Related Questions