Search code examples
jquerysvgjquery-svg

Why my jQuery svg plugin does not work?

Suppose we have the following HTML:

<html>
    <head>
        <script src="jquery.js"></script>
        <script src="jquery.svg.js"></script>
    </head>
    <body>
        <div id="canvas">
        </div>
    </body>
</html>

And jQuery code:

 $().ready(function () {
            var mysvg = $("#canvas").svg("get");
            mysvg.rect(20, 10, 100, 50, 10, 10, { fill: '#666'});         
        });

When I run this code the firebug gives me an error:

TypeError: mysvg.rect is not a function

Please help me out how can i fix this problem

Solution

  • You need to attach an SVG canvas to the element first:

    $('#canvas').svg();

    Then you can retrieve the SVG instance:

    var mysvg = $('#canvas').svg('get');

    Check the documentation