javascriptxmlsvggnuplotxlink

How to make an SVG embedded inline in HTML load its xlink:href dependencies?


I have SVG files that I need to embed inline in an HTML file (using the HTML5 <svg> tag). Those SVG files have a JavaScript dependency, which looks like this:

<script type="text/javascript"
    xlink:href="http://gnuplot.sourceforge.net/demo_svg_4.6/gnuplot_svg.js">
</script>

Here is a standalone SVG image with that script dependency. To activate the JavaScript, you can click on the image, and then there's a box that follows your cursor telling you your (x,y) coordinates.

However, here is the same image embedded directly into an HTML document. According to the web inspector, the browser never even tries to load the JavaScript dependency. When you click and move your cursor around the image, the console fills up with a bunch of reference errors.

How do you make the embedded version load its JavaScript and function like the standalone version?


Solution

  • The code in the document you link uses a self closing <script> and that does not work (unsure if this is a bug in browsers or not).

    The code as you write it:

    <script type="text/javascript"
        xlink:href="http://gnuplot.sourceforge.net/demo_svg_4.6/gnuplot_svg.js">
    </script>
    

    will at least load the script, but then the script assumes the document's root element is an <svg> element (it uses getScreenCTM) and in an HTML document the root element will be an <html> element.

    Maybe it won't help you, but you need a different version of the script.