我有一个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
函数的方法。
答案 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']
就可以了!
当然,应该包装它以检查是否已定义...