JQuery - как вызвать функцию, встроенную в SVG - PullRequest
0 голосов
/ 16 декабря 2018

У меня есть файл 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>

Я ищу способ вызова функции animateJS из кода JQuery.

Ответы [ 2 ]

0 голосов
/ 22 января 2019

В конце концов я нашел более простой способ вызвать скрипт, определенный внутри SVG.В моем JS я просто называю window['my_function_name'], и это работает!Конечно, его следует обернуть, чтобы проверить, определено ли оно ...

0 голосов
/ 16 декабря 2018

Вы можете попробовать ввести <script> в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...