Transformed polygons rendered incorrectly (transformed twice) in Internet Explorer

[GoogleCodeExporter]

What steps will reproduce the problem?
1. In the SVG-edit main menu, select "Open Image".
2. Open the attached file (polygon.svg).

What is the expected output? What do you see instead?

The purple rectangle (it's actually a polygon element) is specified as a 100 x 
100 shape which is scaled vertically by 0.5, so it should end up being 100 x 
50.  In Internet Explorer 10, it is 100 x 25.

In what browser did you experience this problem? (ALL, Firefox, Opera, etc)

Internet Explorer 10 only.

In what version of SVG-edit does the problem occur? (Latest trunk, 2.5.1,
etc)

Trunk (r2524).

Original issue reported on code.google.com by e...@siliconforks.com on 2 Sep 2013 at 12:38

Attachments:

• polygon.svg

[GoogleCodeExporter]

It looks like the underlying problem is that removeAttribute('transform') does 
not work in IE.  See http://jsfiddle.net/gvfLg/ for a demonstration.  The 
workaround seems to be to call setAttribute('transform', '').

This appears to be a known issue as there are already places in svgcanvas.js 
and recalculate.js which call setAttribute('transform', ''); however, this is 
not done consistently throughout the code.

Specifically for this bug the problem appears to be line 808 of recalculate.js:

http://code.google.com/p/svg-edit/source/browse/trunk/editor/recalculate.js?r=25
09#808

Adding selected.setAttribute('transform', '') before that line appears to fix 
the problem in IE.

Original comment by e...@siliconforks.com on 2 Sep 2013 at 10:20