4

I try to add an animate element dynamically to my path element, which works correct. My html: 

<g id="3" class="cluster loop-node">
<path fill="#edf1f2" stroke="#028d35" d="M92,-16C92,-16 408,-16 408,-16 414,-16 420,-22 420,-28 420,-28 420,-88 420,-88 420,-94 414,-100 408,-100 408,-100 92,-100 92,-100 86,-100 80,-94 80,-88 80,-88 80,-28 80,-28 80,-22 86,-16 92,-16"></path>
<text text-anchor="start" x="213.5547" y="-79.4" font-family="Times,serif" font-size="14.00" fill="#000000">1:11</text>
<text text-anchor="start" x="243.8131" y="-79.4" font-family="Times,serif" font-size="14.00" fill="#000000"> (Loop)</text>
</g>

I add my animate element ('<animate attributeType="XML" attributeName="stroke-width" values="6;1;6;1" dur="2s" repeatCount="3"></animate>') by javascript:

$("#3").find("path").append('<animate attributeType="XML" attributeName="stroke-width" values="6;1;6;1" dur="2s" repeatCount="indefinite"></animate>')

After that the animate tag is added correctly:

<g id="3" class="cluster loop-node">
<path fill="#edf1f2" stroke="#028d35" d="M92,-16C92,-16 408,-16 408,-16 414,-16 420,-22 420,-28 420,-28 420,-88 420,-88 420,-94 414,-100 408,-100 408,-100 92,-100 92,-100 86,-100 80,-94 80,-88 80,-88 80,-28 80,-28 80,-22 86,-16 92,-16"><animate attributetype="XML" attributename="stroke-width" values="6;1;6;1" dur="2s" repeatcount="indefinite"></animate></path>
<text text-anchor="start" x="213.5547" y="-79.4" font-family="Times,serif" font-size="14.00" fill="#000000">1:11</text>
<text text-anchor="start" x="243.8131" y="-79.4" font-family="Times,serif" font-size="14.00" fill="#000000"> (Loop)</text>
</g>

But the problem is that the animation is not shown when I insert it that way (programmatically). If I insert the same html from the beginning, then it works, but not when I want to insert them programmatically. I thought maybe I should reload the div, but the animation didn't run. What is the problem with my code?

Code Pope
  • 5,075
  • 8
  • 26
  • 68

1 Answers1

6

you have to start your animation with .beginElement() which is not a jquery method therefore you can't use it with a jquery object. Use the Dom object instead

var myanim=document.createElementNS("http://www.w3.org/2000/svg", 'animate');
myanim.setAttribute("id","myAnimation"); 
myanim.setAttribute("attributeType","XML"); 
myanim.setAttribute("attributeName","stroke-width"); 
myanim.setAttribute("values","6;1;6;1"); 
myanim.setAttribute("dur","2s"); 
myanim.setAttribute("repeatCount","3"); 
var myPath = document.getElementById("path1");

myPath.appendChild(myanim);

function myFunction() {
console.log('hello')
//$("#myAnimation").beginElement();
document.getElementById("myAnimation").beginElement();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction()">Click me</button>

<svg width="320" height="320" viewBox="0 0 320 320">
<path
            id="path1" fill="#edf1f2" stroke="#ff8d35"
            d="M160,100 Q200,100,200,300 Q100,300,100,200 Z">


                </path>

 </svg>
scraaappy
  • 2,830
  • 2
  • 19
  • 29
  • This doesn't work for me. I have made a simple project: http://jsfiddle.net/2pvSX/57/ – Code Pope Mar 12 '18 at 23:19
  • see my updated answer – scraaappy Mar 12 '18 at 23:47
  • Nice. But the problem with your example is that you don't insert the animation programmatically. Your animation is in your HTML. Here: http://jsfiddle.net/2pvSX/73/ I insert it programmatically and try to run it by `document.getElementById("myAnimation").beginElement();` but it does not run. How can that be solved? – Code Pope Mar 12 '18 at 23:54
  • Ok. I think I have now the answer. For a reason which I don't know why, we must not use JQuery. If I do the whole with DOM Object, it works. – Code Pope Mar 13 '18 at 00:03
  • 1
    see here why jQuery.append() is not working with svg element and see the updated snippet https://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element – scraaappy Mar 13 '18 at 00:19