Call JavaScript function inside SVG from Surrounding HTML

Question

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?

score 4 · Accepted Answer · answered Jun 07 '17 at 10:10

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.

First comment after five years, and I just noticed that I forgot one space in front of the SVG code, therefore only "Title Desc" was shown. NOBODY NOTICED THIS FOR FIVE YEARS! :-) The SVG worked a few days later in 2012 so I guess this is solved now :P — Florian Müller, Jun 07 '17 at 15:01

Call JavaScript function inside SVG from Surrounding HTML

1 Answers1

Linked