CODEWITHSUNDEEP
jquerysvg
oliver
oliver

Reputation: 83

How to use JQuery in SVG?

This is the code I wrote:

<?xml version="1.0" standalone="no"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="100" height="100">

    <circle cx="50" cy="50" r="50" id="cir" fill="green" onclick="showFrame()"/>

    <script xlink:href="jQuery.js" language="JavaScript"></script>

    <script type="text/ecmascript"><![CDATA[

        function showFrame() {
            alert($("#cir"));
        }
    ]]></script>
</svg>

If the jquery can work,I can see a alert, but nothing.

Where I write wrong?

Upvotes: 0

Views: 3690

Answers (2)

DrColossos
DrColossos

Reputation: 12998

In my opinion, this is not what you want to do. Mixing JS logic with SVG. You wouldn't do this with HTML and JS either (at least you should not)

<?xml version="1.0" standalone="no"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="100" height="100">
    <circle cx="50" cy="50" r="50" id="cir" fill="green" onclick="showFrame()"/>
</svg>

Then just as you would do regulary somewhere in the HTML

<body>
...
<script>
   $("#cir").on("click", function(){alert($("#cir");});
</script>
</body>

Upvotes: 1

Terry Young
Terry Young

Reputation: 3531

It works for me once I include the jQuery library from a CDN instead.

Are you sure jQuery.js exists at the correct directory?

<?xml version="1.0" standalone="no"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="100" height="100">

    <circle cx="50" cy="50" r="50" id="cir" fill="green" onclick="showFrame()"/>

    <script xlink:href="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

    <script type="text/ecmascript"><![CDATA[

        function showFrame() {
            alert($("#cir"));
        }
    ]]></script>
</svg>

Upvotes: 3

Related Questions