SVG Sizes 2.45 times larger than specified in pixels

[Neilcoder]

Hi,

I don't know whether this is a bug or not, and I couldn't find anything in the forums or documentation directly relating to it yet, so I'm going to post this to see if anyone else has come up against the same problem.

I'm drawing on a div called "canvas"* and the values I'm putting in for for the circle are as follows;

Ext.define('Test.Control.Event', {
extend: 'Ext.draw.Sprite',

constructor: function() {
this.callParent([{
type: 'circle',
fill: '#FCCEED',
radius: 50,
x: 100,
y: 100,
surface: paper.surface
}]);

}
});


*canvas is highlighted as yellow and runs in the background with a z-index setting and is flush to the left hands side of the page.

This results in producing the following SVG code

<circle id="ext-sprite-1153" zIndex="0" fill="#FCCEED" r="50" x="100" y="100" hidden="false" cx="100" cy="100" transform="matrix(1, 0, 0, 1, 0, 0)"/>

However, when I look at the page in the browser we can see what should be 100 pixels comes up as 245.
draw_size_problem.jpg
My initial assumption was that there's something I'd missed in the documentation, or something that is flawed with the browser interpretting the model (using latest FF), but I still haven't found anything yet.

Hope you can help with this because I working to find a solution and its not come to me yet.

Thanks
Neil

[Neilcoder]

Hi I've still not figured this out yet but I have got some better pictures showing what the problem is;


How it should look (IE gets it right);

IE8.jpg



How it looks in FF (much bigger)

FF.jpg


(please ignore the pink circle in the background - there for testing purposes)

Thanks
Neil

[Neilcoder]

Draw size problem occurs in FF only when I add sprites after I have created the draw.Component. I have an example snippet of code here;

// RENDERS NORMALLY IN FIREFOX + IE
   paper = Ext.create('Ext.draw.Component', {
        width: 1000,
        height: 700,
        autoShow: true,
        items: [{
            type: 'path',
            path: ['M0,109.718c0-43.13,24.815-80.463,60.955-98.499L82.914,0C68.122,7.85,58.046,23.406,58.046,41.316',
            'c0,9.64,2.916,18.597,7.915,26.039c-7.44,18.621-11.77,37.728-13.228,56.742c-9.408,4.755-20.023,7.423-31.203,7.424',
            'c-1.074,0-2.151-0.025-3.235-0.075c-5.778-0.263-11.359-1.229-16.665-2.804L0,109.718z M157.473,285.498c0-0.015,0-0.031,0-0.047'].join(''),
            fill: '#C5D83E'
        },
        {
            type: 'circle',
            fill: '#ccc',
            radius: 50,
            x: 200,
            y: 200
        }],
        renderTo: 'canvas'

    });




//RENDERS 2.45 TIMES LARGER IN FIREFOX (APPROX)
         var spriteTest = paper.surface.add({
            type: 'circle',
            fill: '#ccc',
            opacity: 0.5,
            radius: 50,
            x: 200,
            y: 200
         });

          spriteTest.show(true); 

(I can add whole code if needed)

any ideas? hints? suggestions?

[Neilcoder]

please help? anyone?