交互式SVG在HTML中，正确的方式

Question

I need to include a SVG image(a map) in my html doc, and hopefully I can use JQuery to manipulate it. I looked this up on the Internet and some say you can't manipulate the SVG directly. Some suggested the JQuery SVG plugin by Keith Wood, but I can't open that link . Here is an example says that you can include SVG code directly into html5. Well for one thing, my SVG code is a little long so it looks awful if I put the code there, for another I'm still not sure how to manipulate it even if I do that.

So I think maybe I can use some framework, and I tried Raphael, but I need me to convert my SVG to another form and Raphael would render the image for me. But strangely the image became much smaller after I changed the SVG image. And I have trouble figuring out what's wrong.

What I want to achieve is very similar to this page in the admob.com. This page seems to include the SVG code directly in the page.

Can anyone give some advice to achieve something like that?

Thanks.

Answer 1

You don't actually need jQuery to edit the SVG (but you can use it). Include the SVG doc using the object tags like so:

<object data="mySVG.svg" type="image/svg+xml" id="mySVG"></object>

You can then manipulate the DOM of the SVG by getting the document like so:

var svgObject = document.getElementById("mySVG");

moSVG.onload = function(){
    var svgDoc = moSVG.contentDocument;
    //Do SVG manipulation here, using svgDoc instead of document
}

Note the use of onload . Without it, you're likely to get errors as the JS runs before the SVG has fully loaded (especially if you use images in the SVG).

Once you're sure the SVG's loaded, you can use it in JavaScript outside of the onload statement.

If, on the other hand, you want to embed JavaScript inside the SVG directly, you can use <script> tags as usual with one caveat: you need to use xlink if you want external JS (like the following example that imports jQuery)

<script type="text/ecmascript" xlink:href="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>

Internal JS can be described as follows:

If you decided to use this, make sure to define xlink in the opening <svg> tag like so (don't change the urls):

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

However, remember that the JS that's directly in the SVG cannot see anything on your HTML page.

Answer 2

I've voted up @SomeKittens' answer as that is the right way to do what you are looking for, but an alternative would be Ready Set Raphael : it gives you the Raphael code for your SVG and then you can use it like any other Raphael JS. (Obviously you should have included Raphael to use this). You'll still have to figure out variables names if you want to reference independent elements.