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"
".dtd">
<svg id="testSvgId" xmlns="" xmlns: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?
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/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg id="testSvgId" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/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?
Share Improve this question edited Jun 7, 2017 at 15:00 Florian Müller asked Aug 10, 2012 at 11:10 Florian MüllerFlorian Müller 7,82526 gold badges85 silver badges121 bronze badges 2- Initially I was very happy to find this question, but: I tried to run it in Chrome, but it doesn't work :-( "Uncaught ReferenceError: executeAnimation is not defined" – Bigman74066 Commented Mar 9, 2024 at 11:35
- @Bigman74066 this question is quite old and I don't remember exactly anymore how I did solve it, but I still got a running version on my online Hangman game. See hangman.florianmueller.me (need to sign up to play) – Florian Müller Commented Jun 24, 2024 at 14:54
1 Answer
Reset to default 4Without 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/2000/svg" xmlns:xlink="http://www.w3/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.