我制作了一个SVG图像,或者更像是迷你应用程序,用于查看数据图形.我想将它包含在HTML页面中,并调用SVG图像上的方法.
例:
<object id="img" data="image.svg" width="500" height="300"/>
<script>document.getElementById("img").addData([1,23,4]);</script>
Run Code Online (Sandbox Code Playgroud)
是否可以在SVG文档上调用方法?如果是这样,我如何声明要在SVG文件中公开的方法,以及如何从HTML文档中调用它们?
我在这里创建了一个小页面:
<!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>
Run Code Online (Sandbox Code Playgroud)
该test.svg如下所示:
<?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" /> …Run Code Online (Sandbox Code Playgroud)