Call SVG function from HTML/Javascript

by

I am a beginner in Javascript and SCG.
I write a SVG file that contains some scripts inside.
Here an extract of the SVG file (the defs and some functions are not set). I check some posts on stackoverflow and other. It helps me with the onLoad call, but that’s all…

Note: I use to insert the svg, as I understoof the provides capability to load and use the SCG script. In this case, the SVG is loaded as a document (see getSVGDocument is returning NULL in Chrome)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="37mm"
   height="52mm"
   viewBox="0 0 37 52"
   version="1.1"
   id="indicator_RPM"
   
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">

<script >
    // <![CDATA[
function RotateNeedle(name, angleInDegrees){
   let d = [angleInDegrees, cx, cy,].join(" ");
   let rotate = "rotate(" + d +")";
   document.getElementById(name).setAttribute("transform", rotate);
}
    // ]]>
  </script>
<style>......</style>
<defs>...</defs>
</svg>

I display the SVG file thanks to the HTML code

<html>
<object type="image/svg+xml" data="indicator_RPM.svg" id="object_indicator_RPM"></object>


 <script type="text/javascript">

    var svgObject = document.getElementById("object_indicator_RPM");
    var svg;
    svgObject.onload = function(){
        svg = svgObject.contentDocument.getElementById('indicator_RPM');
        svg.RotateNeedle("EngineRPMNeedle", 120);
      
        console.log(svg);
    };

    
 </script>
</html>

The SVG file is well displayed. The scripts set in the SVG file are well executed (the display is in accordance with my definition and scripts modify it accordingly) when I load the SVG file alone (in Edge or Firefox) or through the HTML file.
But, I can’t call a function set in the SVG script section (here the function “RotateNeedle”). I got the message “svg.RotateNeedleis not a function at svgObject.onload (panels.html:11:13)”

Do I miss something somewhere ??

Edit: I may try to put some function in the HTML/javascript code. Nevertheless, we are in experimental development, and some tuning is required. I want to avoid duplication of the configuration / constants definition as far as possible.

The following code, set in the HMT/javascript, performs the expected function, but it does not fulfil the expected implementation (and so I consider the solution as “not solving the problem”):

    function RotateNeedle(item, angleInDegrees){
    let d = [angleInDegrees, 15,15,].join(" ");
    let rotate = "rotate(" + d +")";
    item.setAttribute("transform", rotate);

But, you have to consider that the “15, 15” are identified as constant in the SVG file.

Thanks

Edit: I Edit the question in regard of the initial comments.

  • How do you know that the <script> code inside the SVG file is executed? Is it called from somewhere inside the SVG document?

    – 

  • I doubt that RotateNeedle is a property of svg. What if you call RotateNeedle(…) without the svg.

    – 

  • 1

    @James well when an SVG is imported as an image (like for <img>), I’m pretty sure embedded scripts are ignored, for some fairly obvious security reasons. I would not be surprised if that also held for <object> tags, but I don’t know that for sure.

    – 

  • 3

    A suggestion: Perhaps solve the problem by avoiding it. Put all the SVG code directly in the HTML document instead of having it in a separate file. Then there are no barriers to script execution.

    – 

Well
After several check and tries, the following code HTML/javascript achieve what I want

 <html lang="en" xml:lang="en">
 <object type="image/svg+xml" data="indicator_RPM.svg" id="object_indicator_RPM"></object>

 <script type="text/javascript">

     var svgObject = document.getElementById("object_indicator_RPM");
     var svg = svgObject.contentWindow;
     svg.RotateEngineRPM();

 </script>
 </html>

It uses the .contentWindow function.
Now, I don’t have a clear view why I have to use the contentWindow to achieve this, but…

Leave a Comment