title: After dynamically adding element to SVG the item is not visible
body: <p>I am creating a custom map that is drawn in an SVG. I want to add a polygon to this map,
  however after adding the polygon it is not drawn. If I paste the complete page into an .html file and open it, it does show (http://peterelzinga.eu/map/test.html).</p>
  
  <p>The code for adding the polygon to my SVG:</p>
  
  <pre><code>var svg = file_get_contents("18/135160/86183.svg");
  var parser = new DOMParser();
  var data = parser.parseFromString(svg, "text/xml");
  data = data.firstChild;
  console.log(data);
  data.setAttribute ("x", d);
  data.setAttribute ("y", e);
  document.getElementById('front').appendChild(data);
  </code></pre>
  
  <p>The SVG element after adding the polygon:</p>
  
  <pre><code>&lt;svg id="map" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512"&gt;
      &lt;g id="back"&gt;
          &lt;image xlink:href="12/2110/1345.png" x="0" y="0" width="256" height="256"&gt;&lt;/image&gt;
      &lt;/g&gt;
      &lt;g id="front"&gt;
          &lt;g width="256" height="256" x="0" y="0"&gt;
              &lt;polyline fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="256,85.333 209,100.667 230.334,158.334 143,194.334 160.667,248.667 221.667,223.667 256,241.334 " onclick="alert('St Jansdal')"&gt;&lt;/polyline&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Does anyone know why this happens? </p>