Geek Answers Handbook

Invoking JavaScript function inside SVG from HTML environment

I created a small page, like 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>

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 the executeAnimation() function from the JavaScript on the HTML page, which is defined to link the SVG image. This does not actually work.

I also tried this:

 <svg onload='onloadFunction()'...> ... function onloadFunction() { alert('i am loading'); window.executeAnimation = executeAnimation(); }

This was suggested in another forum, but that didn't work window.executeAnimation ( window.executeAnimation was undefined outside).

What would be the right correct way to do this?

+8
javascript html svg
source share
1 answer

Without seeing the source of your .svg, it is 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 fix this, post the source of your .svg and I’ll get a specific answer for you.

+3
source share

More articles:


All Articles