JQuery - how to call a function embedded inside an SVG

Question

I have an SVG file with a js function defined inside (performing some GreenSock animations). The SVG simplified :

<svg baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" >

<script type="text/javascript">
    var tl = new TimelineMax({paused: "true"});

    function hideShapes() {
      tl.reverse();
    }

    function animateJS(svg) {
      tl
        .to(svg, 1, {delay: 1, attr:{viewBox:"-120 -96 392 96"}} )
        .staggerTo(".symbol_copy", 1, {
          autoAlpha: true,
          svgOrigin: "8px 56px",
          cycle: {
            rotation: [-100,-75,-50,-25],
            rotationZ: 0.001,
            delay: function(index) { return 0.7-(0.15 * index); }
            }
          },
          0
        );
      tl.play();
    }
    </script>   
</svg>

I am looking for a way to call the animateJS function from the JQuery code.

Possible duplicate of [Call JavaScript function inside SVG from Surrounding HTML](https://stackoverflow.com/questions/11900452/call-javascript-function-inside-svg-from-surrounding-html) — Heretic Monkey, Jan 21 '19 at 21:53

score 0 · Answer 1 · answered Dec 16 '18 at 20:35

0

You might try injecting a <script> into your svg:

function callFn(n) {
  var s = document.createElement('script');
  s.innerText = 'this["' + n + '"]()';
  document.querySelector('svg').appendChild(s);
}

<button onclick="callFn('say')">CALL</button>

<svg baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<script type="text/javascript">
  function say() {
    alert('called!')
  }
</script>   
</svg>

answered Dec 16 '18 at 20:35

Kosh

16,966
2
19
34

will the function called this way still be able to access the inner SVG elements ? my function basically triggers some greensock animations when called... – Louis Shraga Dec 19 '18 at 12:34
@LouisShraga, yes it will. – Kosh Dec 19 '18 at 16:44

score 0 · Accepted Answer · answered Jan 21 '19 at 21:47

0

Eventually i found easier way to call the script defined inside the SVG. In my JS I simply call window['my_function_name'] and it works ! Of course, it should be wrapped to check if it is defined ...

answered Jan 21 '19 at 21:47

Louis Shraga

773
1
7
26

JQuery - how to call a function embedded inside an SVG

2 Answers2