jQuery-如何调用嵌入在SVG中的函数

时间:2018-12-16 20:20:35

标签: javascript jquery svg

我有一个SVG文件,其中定义了js函数(执行一些GreenSock动画)。 SVG简化了:

<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>

我正在寻找一种从JQuery代码调用animateJS函数的方法。

2 个答案:

答案 0 :(得分:0)

您可以尝试向{svg中注入<script>

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>

答案 1 :(得分:0)

最终,我找到了一种更简单的方法来调用SVG内部定义的脚本。 在我的JS中,我只需调用window['my_function_name']就可以了! 当然,应该包装它以检查是否已定义...