Javascript / jQuery in external file with SVG in external file

Question

I have a situation where I load an SVG graphic from an external file and embed it into the html with the object tag method, and then I want to make the SVG interactive so that when some elements in the SVG are clicked, some other elements within the html page are affected. I plan to use this so that when some element of the graphic is clicked, more detailed information about the topic is shown in another element.

Therefore, the main question is, which method do I need use to embed the SVG and how do I need to link external Javascript files so that the Javascript functions in the same way as all the other external JS files included in the html page at the end of body, and I can target all elements inside and outside the SVG. A big plus would be if jQuery could also be enabled, which I understand is also a bit of an issue, since the DOMs differ.

I do not necessarily need to support IE8 or lower.

For example, if I have the following structure:

<body>
  <!-- SVG graphic -->
  <object type="image/svg+xml" data="images/somegraphic.svg">
  Your browser does not support SVG
  </object>

  <!-- details appear in this div -->
  <div class="details"></div>

  <!-- external JS file -->
  <script scr="somejavascript.js">
</body>

And I would want to do e.g. this in the external JS file. I.e. I would need the external JS to be able to target both elements inside the SVG and outside it in the html.

// recognize click inside the SVG, assume an element inside the SVG has a class "clickable"
$(".clickable").click(function(){
  $(".details").text("Detailed information about what you just clicked.");
});

Please provide some code so we can better understand what you're trying to accomplish. — Rob Johansen, Aug 02 '15 at 17:03
@AlienBishop This question is not specific to the code or what I'm doing with the code. But I will give you an example. — Roope, Aug 03 '15 at 05:10
@Roope I recommend you to have a look at `raphaeljs.com `. it is library that manipulate svg with ease. — Milan V., Aug 03 '15 at 05:26
@amorbytes Thanks, that seems to be for creating vector graphics, and those would be part of the same DOM then, which would be very good. But what I'm doing is loading a whole (Illustrator-made) graphic / chart / graph thing from an external SVG file, and I will not be creating that element by element in JS. I also do not need to manipulate the SVG itself in other ways than what CSS is capable of doing (mainly simple hover effects). — Roope, Aug 03 '15 at 05:39
@Roppe What about this ? https://github.com/crccheck/raphael-svg-import-classic — Milan V., Aug 03 '15 at 06:04
http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript/3379830#3379830 — Ian, Aug 03 '15 at 09:33

Javascript / jQuery in external file with SVG in external file

0 Answers0