Question

我有一个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函数的方法。

Answer 1

您可以尝试向{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>

Answer 2

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

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

2 个答案: