0

To keep the code clean I was attempting to put my scripting code in script.js and my SVG code in svg.svg . Additionally I was including these files in my html but the javascript does not run at all. Is there some way to achieve this or do I have to embed the javascript in the SVG code using:

<script>
<![CDATA[
 ...
// ]]>
</script>

My Current html code includes the javascript and svg in this manner:

<embed src="svg.svg" type="svg+xml"></embed>

and

<script type="text/javascript" xlink:href="script.js"></script>
Superios
  • 77
  • 1
  • 1
  • 9
  • You can include your javascript code directly in the ` – PA. Jul 30 '13 at 14:11
  • Your problem seems similar to this: http://stackoverflow.com/q/12583879/1169798 – Sirko Jul 30 '13 at 14:12
  • So in my in html file I am including both the svg and js file but for some reason the javascript is unable to change the svg elements. I continued looking and found this:http://apike.ca/prog_svg_jsanim.html but its still not working with that. I feel that I am missing some declaration somewhere. – Superios Jul 30 '13 at 14:17
  • is your html served by a http server? or is it loaded via file: protocol? – PA. Jul 30 '13 at 14:21
  • Its all client side. I have an html file, javascript file and svg file all in one folder and I am running the html file with references to the js and svg files. – Superios Jul 30 '13 at 14:26
  • 3
    please post the relevant part of your html code – PA. Jul 30 '13 at 14:52
  • I have added it as an edit. It was too cluttered when I put it in a comment. – Superios Jul 30 '13 at 15:28

1 Answers1

0

So I learned a couple of things through my trial and error. Although I am sure most people may already know this I am learning this on my own and it was a big realization for me. For some reason the documentation is not as thorough as one would expect.

  1. The markers <![CDATA[at the beginning and end // ]]> of the script are not really required. The script can be placed out of the svg tags. I believe that in the case that you are placing code within the tags you may need to include those identifiers.

  2. The svg file can include the js file in this manner:

    <script type="text/javascript" xlink:href="script.js"></script>

  3. As always the elements in svg can be easily referenced by id. Just give an id and then use document.getElementById()

  4. Another interesting discovery is that the the O Reily book on SVG located at: http://commons.oreilly.com/wiki/index.php/SVG_Essentials sometimes uses some old syntax which does not run correctly. So watch out.

Superios
  • 77
  • 1
  • 1
  • 9