ansaurus

Question

question about correctly structuring javascript, css, and svg

Answer 1

+2 A:

Hi,

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

First, you're trying to query the DOM of the embedded SVG document, but the query being performed will only query the DOM on the current page. To access the DOM of an embedded SVG document, you will need to do something like the following:

http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript/3379830#3379830

The second reason why this will not work is that jquery is currently not able to query SVG documents. The reason for this is that the class attribute is encoded as an animated value in SVG DOM, as opposed to a string in HTML DOM, which confuses jquery.

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

This does many things that appear to be relevant to your project, including modifying jQuery so that it is able to query SVG documents, and embedding the SVG document in the HTML document using either native DOM, if it's supported, or the Adobe plugin. Be careful, though, as I have found the SVG DOM plugin to be unstable in certain situations in Chromium.

echo-flow 2010-08-26 00:54:16

ansaurus

tags:

views:

answers:

question about correctly structuring javascript, css, and svg

related questions