从周围的HTML调用SVG内部的JavaScript函数 [英] Call JavaScript function inside SVG from Surrounding HTML
问题描述
<！DOCTYPE html>
< html>
< head>
< title>测试< /标题>
< script type =text / javascript>
函数test（）{
executeAnimation（）;
}
< / script>
< / head>
< body>
< h1> Tester< / h1>
< embed src =test.svgtype =image / svg + xml/>
< hr />
< input type ='button'value ='Test'onclick ='test（）'/>
< / body>
< / html>
<？xml version =1.0？>
<！DOCTYPE svg PUBLIC - // W3C // DTD SVG 20010904 // EN
http://www.w3.org/TR/2001/REC-SVG-20010904/DTD /svg10.dtd\">
< svg id =testSvgIdxmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkwidth = 950height =900>
< title>标题< / title>
< desc> Desc< / desc>
< defs>
< script type =text / javascript>
<！[CDATA [
function executeAnimation（）{
document.getElementById（'anim'）。beginElement（）;
}
]]>
< / script>
< / defs>
< ellipse cx =500cy =1090rx =600ry =0fill =rgb（94,114,54）>
< / svg>
正如您所看到的，我想从HTML页面中的JavaScript调用函数 executeAnimation（），它是在SVG图像中定义的。
我也试过这个： < svg onload ='onloadFunction（）'...>
...
函数onloadFunction（）{
alert（'i am loading'）;
window.executeAnimation = executeAnimation（）;
}
这是在另一个论坛中建议的，但这也不起作用（ window.executeAnimation 是从外部未定义的）。
什么才是真正正确的方法呢？
没有看到.svg的源代码，就不可能专门回答...
请查看： https://codepen.io/lambdacreatives/pen/uygzk
HTML
< svg version =1.1id =Layer_1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkx =0px y =0pxwidth =77pxheight =77pxviewBox =0 0 77 77enable-background =new 0 0 77 77xml：space =preserve>
< g>
c0,20.813,16.932,37.746,37.742,37.746c8.438,0,16.48-2.773,23.061-7.8651-3.89-8.533C52.514,64.405,45.818,67.2,38.457,67.2z >
attributeName =transform
attributeType =XML
id =ani-circle
type =rotate
from =0 38.501500725746155 38.4994986653327945
to =360 38.501500725746155 38.4994986653327945
dur =0.3s
begin =click
repeatCount =1
fill =freeze/>
< / path>
< / g>
< / svg>
< br>< br>
< button id =trigger>触发动画< / button>
CSS
body {
background-color：black;
text-align：center;
}
svg {
height：100％;
width：200px;
path {
fill：white;
JS
$（#trigger）.click（function（）{
document.getElementById（ani-circle）。 beginElement（）;
}）;
如果您无法解决这个问题，请发布您的.svg源文件，我会为你敲定一个具体的答案。
I've created a little page just as this one here:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function test() {
executeAnimation();
}
</script>
</head>
<body>
<h1>Tester</h1>
<embed src="test.svg" type="image/svg+xml" />
<hr />
<input type='button' value='Test' onclick='test()' />
</body>
</html>
The test.svg looks like this:
<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg id="testSvgId" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="950" height="900">
<title>Title</title>
<desc>Desc</desc>
<defs>
<script type="text/javascript">
<![CDATA[
function executeAnimation () {
document.getElementById('anim').beginElement();
}
]]>
</script>
</defs>
<ellipse cx="500" cy="1090" rx="600" ry="0" fill="rgb(94,114,54)">
<animate id="anim" attributeType="XML" attributeName="ry" begin="indefinite" dur="2s" from="0" to="350" fill="freeze" />
</ellipse>
</svg>
As you can see, I want to call from JavaScript in the HTML page the function executeAnimation() which is defined insite the SVG image. This actually does not work.
I also tried this:
<svg onload='onloadFunction()'...>
...
function onloadFunction() {
alert('i am loading');
window.executeAnimation = executeAnimation();
}
This was suggested in another forum, but this did also not work (window.executeAnimation was undefined from outside).
What would be the real correct way to do this?
Without seeing the source of your .svg, it's impossible to answer specifically...
Check this out: https://codepen.io/lambdacreatives/pen/uygzk
HTML
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="77px" height="77px" viewBox="0 0 77 77" enable-background="new 0 0 77 77" xml:space="preserve">
<g>
<path id="d" fill="#ffffff" d="M49.045,61.112c2.549-1.198,4.867-2.798,6.857-4.743L36.83,13.587c-2.862,0.186-5.602,0.826-8.124,1.899
l6.448,14.465l-15.12,25.387c1.866,2.038,4.044,3.785,6.489,5.118L39.236,39.11L49.045,61.112z"/>
<path id="circle" fill="#ffffff" d="M38.457,67.2c-15.852,0-28.701-12.848-28.701-28.701c0-15.851,12.85-28.697,28.701-28.697
c5.773,0,11.137,1.72,15.639,4.653l4.605-7.702c-6.049-3.873-13.114-5.998-20.359-5.998C17.531,0.754,0.6,17.687,0.6,38.499
c0,20.813,16.932,37.746,37.742,37.746c8.438,0,16.48-2.773,23.061-7.865l-3.809-8.533C52.514,64.405,45.818,67.2,38.457,67.2z">
<animateTransform
xlink:href="#circle"
attributeName="transform"
attributeType="XML"
id="ani-circle"
type="rotate"
from="0 38.501500725746155 38.4994986653327945"
to="360 38.501500725746155 38.4994986653327945"
dur="0.3s"
begin="click"
repeatCount="1"
fill="freeze" />
</path>
</g>
</svg>
<br><br>
<button id="trigger">Trigger Animation</button>
CSS
body {
background-color: black;
text-align: center;
}
svg {
height: 100%;
width: 200px;
path {
fill: white;
}
}
JS
$( "#trigger" ).click(function() {
document.getElementById("ani-circle").beginElement();
});
If you can't work it out from that, post the source of your .svg and I'll knock up a specific answer for you.
这篇关于从周围的HTML调用SVG内部的JavaScript函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
