Wrong scaling of programmatically added svg elements in IE

[bernd-fruechtnicht]

Adding elements programmatically causes them to be scaled down by factor 0.5 in IE. The example below demonstrates this behaviour. The same code works as expected in Firefox.

When the existing path 'el1' is modified through scripting (or when it is initially defined within the xml) everything works as expected in both IE and Firefox. However the second path element created within the script appears scaled down by 0.5 in IE:

<script type="application/ample+xml">

<svg id="svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
   width="500" height="500"
   viewBox="0 0 500 500"

    <g
     id="layer1"
      >
    <path id="el1"/>
  </g>
</svg>
</script>

<script type="text/javascript">

ample.addEventListener("load", function(oEvent) {
var el;
var group = ample.getElementById('layer1');

// existing element working as expected
el = ample.getElementById('el1');
el.setAttribute('fill', 'none');
el.setAttribute('stroke', '#0000ff');
el.setAttribute('d', "M0,0L500,500");
group.appendChild(el);

// newly created element being scaled down in IE
el = ample.createElementNS("http://www.w3.org/2000/svg", 'path');
el.setAttribute('stroke', '#0000ff');
el.setAttribute('fill', 'none');
el.setAttribute('d', 'M500,0L0,500');
group.appendChild(el);

}, false);

</script>