1. #1
    Sencha Premium Member Neilcoder's Avatar
    Join Date
    Apr 2011
    Location
    Ireland
    Posts
    264
    Vote Rating
    0
    Neilcoder is on a distinguished road

      0  

    Question SVG Sizes 2.45 times larger than specified in pixels

    SVG Sizes 2.45 times larger than specified in pixels


    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

  2. #2
    Sencha Premium Member Neilcoder's Avatar
    Join Date
    Apr 2011
    Location
    Ireland
    Posts
    264
    Vote Rating
    0
    Neilcoder is on a distinguished road

      0  

    Default


    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

  3. #3
    Sencha Premium Member Neilcoder's Avatar
    Join Date
    Apr 2011
    Location
    Ireland
    Posts
    264
    Vote Rating
    0
    Neilcoder is on a distinguished road

      0  

    Exclamation Draw size problem occurs in FF only after I have created the draw.Component

    Draw size problem occurs in FF only after I have created the draw.Component


    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;

    PHP Code:
    // RENDERS NORMALLY IN FIREFOX + IE
       
    paper Ext.create('Ext.draw.Component', {
            
    width1000,
            
    height700,
            
    autoShowtrue,
            
    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',
                
    radius50,
                
    x200,
                
    y200
            
    }],
            
    renderTo'canvas'

        
    });




    //RENDERS 2.45 TIMES LARGER IN FIREFOX (APPROX)
             
    var spriteTest paper.surface.add({
                
    type'circle',
                
    fill'#ccc',
                
    opacity0.5,
                
    radius50,
                
    x200,
                
    y200
             
    });

              
    spriteTest.show(true); 
    (I can add whole code if needed)

    any ideas? hints? suggestions?

  4. #4
    Sencha Premium Member Neilcoder's Avatar
    Join Date
    Apr 2011
    Location
    Ireland
    Posts
    264
    Vote Rating
    0
    Neilcoder is on a distinguished road

      0  

    Default


    please help? anyone?

Tags for this Thread