Вопросы Теги

Вызов функции JavaScript внутри SVG из окружающего 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>

Как видите, я хочу вызвать из JavaScript на HTML-странице функцию executeAnimation(), которая определена внутри изображения SVG. Это на самом деле не работает.

Я также пробовал это:

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

Это было предложено на другом форуме, но это тоже не сработало(window.executeAnimationне был определен извне ).

Каким будет реальный правильный способ сделать это?

10
задан Florian Müller 7 June 2017 в 15:00
поделиться