title: SVG: Add animate element dynamically
body: <p>I try to add an <code>animate</code> element dynamically to my <code>path</code> element, which works correct. My html:  </p>
  
  <pre><code>&lt;g id="3" class="cluster loop-node"&gt;
  &lt;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"&gt;&lt;/path&gt;
  &lt;text text-anchor="start" x="213.5547" y="-79.4" font-family="Times,serif" font-size="14.00" fill="#000000"&gt;1:11&lt;/text&gt;
  &lt;text text-anchor="start" x="243.8131" y="-79.4" font-family="Times,serif" font-size="14.00" fill="#000000"&gt; (Loop)&lt;/text&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>I add my <code>animate</code> element (<code>'&lt;animate attributeType="XML" attributeName="stroke-width" values="6;1;6;1" dur="2s" repeatCount="3"&gt;&lt;/animate&gt;'</code>) by javascript:</p>
  
  <pre><code>$("#3").find("path").append('&lt;animate attributeType="XML" attributeName="stroke-width" values="6;1;6;1" dur="2s" repeatCount="indefinite"&gt;&lt;/animate&gt;')
  </code></pre>
  
  <p>After that the <code>animate</code> tag is added correctly:</p>
  
  <pre><code>&lt;g id="3" class="cluster loop-node"&gt;
  &lt;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"&gt;&lt;animate attributetype="XML" attributename="stroke-width" values="6;1;6;1" dur="2s" repeatcount="indefinite"&gt;&lt;/animate&gt;&lt;/path&gt;
  &lt;text text-anchor="start" x="213.5547" y="-79.4" font-family="Times,serif" font-size="14.00" fill="#000000"&gt;1:11&lt;/text&gt;
  &lt;text text-anchor="start" x="243.8131" y="-79.4" font-family="Times,serif" font-size="14.00" fill="#000000"&gt; (Loop)&lt;/text&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>But the <strong>problem</strong> is that the animation is not shown when I insert it that way (programmatically). If I insert the same <code>html</code> from the beginning, then it works, but not when I want to insert them programmatically. 
  I thought maybe I should reload the <code>div</code>, but the animation didn't run.
  What is the problem with my code?</p>