title: Manipulate SVG in HTML with JS
body: <p>I'm having an problem with construction of a svg element using javascript in an html-embedded svg image. I created two files that should be exactly the same but one of them is being constructed with js.
  </p>
  
  <p><strong>SVG.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;Pozadí&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;svg
      id="pozadi"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      height="200"
      width="200"
     &gt;
     &lt;path
       d="M 0,0 L 150,150 L 100,150 L 150,150 L 150,100"
       style="stroke: #000; stroke-width: 2px; stroke-linecap: round; fill: none;"
      &gt;
      &lt;animate
        from="M 0,0 L 150,0 L 115,35 L 150,0 L 115,-35"
        to="M 0,0 L 150,150 L 100,150 L 150,150 L 150,100"
        dur="10s"
        begin="5s"
        attributeType="XML"
        attributeName="d"
       &gt;
      &lt;/animate&gt;
     &lt;/path&gt;
    &lt;/svg&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><br />
  <strong>JS.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;Pozadí&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;svg
      id="pozadi"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      height="200"
      width="200"
     &gt;
    &lt;/svg&gt;
    &lt;script&gt;
     var svg  = document.getElementById('pozadi');
     var path = document.createElementNS('http://www.w3.org/2000/svg/','path'); //I have tried createElement(string) too
     path.setAttribute('style',"stroke: #000; stroke-width: 2px; stroke-linecap: round; fill: none;");
     path.setAttribute('d',"M 0,0 L 150,150 L 100,150 L 150,150 L 150,100");
     var anim = document.createElementNS('http://www.w3.org/2000/svg/','animate');
     anim.setAttribute('from','M 0,0 L 150,0 L 115,35 L 150,0 L 115,-35');
     anim.setAttribute('to','M 0,0 L 150,150 L 100,150 L 150,150 L 150,100');
     anim.setAttribute('dur','10s');
     anim.setAttribute('begin','5s');
     anim.setAttribute('attributeType','XML');
     anim.setAttribute('attributeName','d');
     path.appendChild(anim);
     svg .appendChild(path);
    &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The second file, JS.html, is just white and plain.<br>
  I'm asking, how to correct it? Thanks, m93a</p>