función Llamar JavaScript dentro de SVG Rodeando 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>

El test.svg se parece a esto:

<?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>

Como se puede ver, desea llamar desde JavaScript en la página HTML la función executeAnimation() que está definida en la imagen SVG. Esto en realidad no funciona.

También probé esto:

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

Esto fue sugerido en otro foro, pero esto también no funcionaba (window.executeAnimation no estaba definido desde el exterior).

¿Cuál sería la forma correcta de hacer esto?

Fuente

2012-08-10 Florian Müller

Sin ver la fuente de su .svg, es imposible responder específicamente ...

mira esto: 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(); 
});

Si no puede trabajar fuera de eso, publicar la fuente de su .svg y yo voy a sacar una respuesta específica para usted.

Fuente

2017-06-07 10:10:36 dennispreston

Primer comentario después de cinco años, y acabo de notar que olvidé un espacio delante del código SVG, por lo tanto, solo se mostró "Título Desc". ¡NADIE LO HA NOTADO POR CINCO AÑOS! :-) El SVG funcionó unos días más tarde en 2012, así que supongo que esto se resuelve ahora: P –

¡Brillante! ¡Ni siquiera vi la fecha! Jaja. – dennispreston

función Llamar JavaScript dentro de SVG Rodeando HTML

Respuesta

Cuestiones relacionadas