[英]Call svg javascript function inside html javascript function
[英]Call JavaScript function inside SVG from Surrounding 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>
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" />
</ellipse>
</svg>
如您所見,我想從 HTML 頁面中的 JavaScript 調用在 SVG 圖像中定義的函數executeAnimation()
。 這實際上是行不通的。
我也試過這個:
<svg onload='onloadFunction()'...>
...
function onloadFunction() {
alert('i am loading');
window.executeAnimation = executeAnimation();
}
這是在另一個論壇中提出的,但這也沒有用( window.executeAnimation
從外部未定義)。
真正正確的方法是什么?
沒有看到 your.svg 的來源,無法具體回答...
檢查一下: 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();
});
如果您無法從中解決問題,請發布 your.svg 的來源,我會為您提供一個具體的答案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.