Reference separate Javascript file from svg class

Question

I am trying to use a javascript function (which is in a separate js file) for my onclick event for a svg component. I have tried referencing the file from within my svg node, but I get an error saying function undefined. It does say that the src attribute within the script tag is not declared.

I tried changing the scr to xlink:href and adding the xmls:xlink attribute to the svg but I get the same problem.

If I add the function within the svg node it works fine.

How and where do I reference the js file with the function that I want to call?

This is the contents of my SVG file. The method I want to call is ShowContextMenu() which is in another file.

  <svg class="SystemOverview" id="m" currentScale="1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 900 500">

<svg class="p21" componentType="Valve2Way" onclick="ShowContextMenu()">    
  <line x1="73" y1="40" x2="73" y2="45" stroke = "black"></line>
  <line x1="73" y1="62" x2="73" y2="66" stroke = "black"></line>
  <polygon id="p21IN" points="65,43 73,53 80,43" stroke="black" fill="white"></polygon>
  <polygon id="p21OUT" points="65,62 73,53 80,62" stroke="black" fill="white"></polygon>
  <polygon id="p21ALERT" points="60,40 85,40 85,66 60,66" stroke="none" stroke-width="2" fill="none"></polygon>
</svg>

We need to see the code in question. Please edit the question and add it. — Robert Longson, Dec 20 '13 at 11:05
You should look at this answer - http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript?lq=1 — Andrew Surzhynskyi, Dec 20 '13 at 16:40

score 0 · Answer 1 · answered Dec 20 '13 at 17:50

The external javascripts should be placed in the <head> section. The rest of your code looks to be right.

<html>
    <head>
        <script type="type="text/javascript" src="path/to/file.js"></script>
    </head>
    <body>
        ...
    </body>
</html>

Reference separate Javascript file from svg class

1 Answers1