内SVG调用JavaScript函数从周围的HTML

我创建了一个小页面，就像这一个在这里：内SVG调用JavaScript函数从周围的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>

正如你所看到的，我要从HTML页面中的JavaScript调用函数executeAnimation()，该函数在SVG图像中定义。这实际上不起作用。

我也试过这样：

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

这在另一个论坛上建议，但这丝毫也不起作用（window.executeAnimation从外面未定义）。

什么才是真正正确的方法来做到这一点？

来源

2012-08-10 Florian Müller

没有看到你的.svg的来源，这是不可能的具体回答...

检查了这一点：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; 
    } 
}

个

$("#trigger").click(function() { 
    document.getElementById("ani-circle").beginElement(); 
});

如果你不能从工作了，发表您的.SVG的来源，我就敲了一个明确的答案给你。

来源

2017-06-07 10:10:36 dennispreston

五年后的第一条评论，我只注意到我在SVG代码前面忘了一个空格，因此只显示“标题描述”。 NOBODY发布了五年！ :-) SVG几天后在2012年工作，所以我想现在已经解决了：P – 2017-06-07 15:01:08

太棒了！我甚至没有看到日期！哈哈。 – dennispreston 2017-06-07 15:04:57

内SVG调用JavaScript函数从周围的HTML

回答

相关问题