Geek Answers Handbook

Question about proper javascript, css and svg structuring

I have an index.html file that includes a svg and CSS file and 2 javascripts files and has a javascript function inside it

for some reason I cannot run the javascript function.

is a string that should be different>?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript Tooltip Demo</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <embed src="usmap.svg" width="3000" height="1000" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".addtooltip").tooltip(); }); // closes document.ready </script> </body> </html>
0
source share
1 answer

There are several reasons why the code you posted here will not work.

First you try to query the DOM of the embedded SVG document, but the query you are executing will only query the DOM on the current page. To access the DOM of an embedded SVG document, you need to do something like the following:

How to access SVG elements using Javascript

The second reason this will not work is because jquery is currently unable to request SVG documents. The reason for this is because the class attribute is encoded as an animated value in the SVG DOM, as opposed to the line in the HTML DOM, which confuses jquery.

For this reason, and since I believe that it will fix other problems that you have with regard to structuring your HTML document, I would recommend that you use the jQuery SVG javascript library: http://keith-wood.name/svg. html

This does a lot of things that seem relevant to your project, including modifying jQuery so that it can query for SVG documents and embed an SVG document in an HTML document using either the native DOM, if supported, or the Adobe plugin. However, be careful, as I found that the SVG DOM plugin is unstable in certain situations in Chromium.

+2
source

More articles:


All Articles