How to use jquery in SVG (Scalable Vector Graphics)?
The jquery-svg library specifically aims to facilitate this: http://keith-wood.name/svg.html
If you wish to avoid using a library, then there are a few basic initial challenges and decisions which you need to consider.
First, you need to specify how you're embedding the SVG. SVG can be included in XHTML "inline" in most modern browsers. Second, and more commonly, you can embed the SVG document using an HTML embed or object tag.
If you use the first approach, then you can use an HTML script element in the host HTML document to import jQuery, and then your scripts in the HTML document should be able to access elements in the inline SVG document easily and in the way you would expect.
If, however, you're using the second approach, and embedding the SVG using an object or embed element, then you have a few more decisions to make. First, you need to decide whether the jQuery should be imported into
- the HTML embedding context, using an HTML script element using an HTML script element, or
- the SVG embedded context, using an SVG script element inside the SVG document.
If you use the latter approach, then you'll need to use an older version of jQuery (I think 1.3.2 should work), as the newer versions use feature detection, which breaks on SVG documents.
The more common approach is to import jQuery into the host HTML document, and retrieve the SVG node from the embedded context. You need to be careful with this approach, however, because the embedded SVG document loads asynchronously, and so an onload listener needs to be set on the object tag in order to retrieve the host element. For a complete description of how to retrieve the document element of the embedded SVG document from HTML, see this answer: How to access SVG elements with Javascript
Once you have the root documentElement of the embedded SVG document, then you'll need use it as a context node when you make queries with jQuery in the embedding HTML document. For example, you could do the following (untested, but should work):
<html> <head> <title>SVG Illustrator Test</title> <script src="jQuery.js"></script> <script> $(document).ready(function(){ var a = document.getElementById("alphasvg"); //it's important to add an load event listener to the object, as it will load the svg doc asynchronously a.addEventListener("load",function(){ var svgDoc = a.contentDocument; //get the inner DOM of alpha.svg var svgRoot = svgDoc.documentElement; //now we can query stuff with jquery like this //note that we pass in the svgRoot as the context node! $("foo bar",svgRoot); },false); }) </script> </head> <body> <object data="alpha.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object> </body></html>
SVG uses elements in the DOM ie.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="600"> <desc>My SVG</desc> <defs> <path fill="#ffffff" stroke="#ffffff" d="M100,100L100,100Z" style="fill-opacity: 0.3; stroke-width: 1; stroke-linecap: round;" fill-opacity="0.3" stroke-width="1" stroke-linecap="round"></svg>Accessing it and manipulating it can be done the same way jQuery manipulates any other Object in the DOM. ie.
$('svg path').remove(); //removes the path.If you are looking for a javascript library to manipulate SVG elements, check outRaphael.js.