Menu
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?
542
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.
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
