SVG text scales inproperly

Question

I use Ext.daw.* to draw svg text. The root element has size 200x300. If some element has larger size than size of root element then everything scales properly except the text: text appears to have larger size.

Check out this demo. How to make text scale properly?

Ext.create('Ext.draw.Component', {
    renderTo: Ext.getBody(),
    width: 200,
    height: 300,
    items: [{
        type: 'path',
        path: 'M0 0 V200',
        'stroke-width': 3,
        stroke: 'green'
    },{
        type: 'path',
        // if I set path to 'M200 0 V700' then text goes crazy
        path: 'M200 0 V200',
        'stroke-width': 3,
        stroke: 'green'
    },{
        type: 'text',
        x: 0,
        y: 50,
        // text is located accurately between two lines
        // but when one of the lines exceeds size of the canvas
        // text's size changes
        text: 'wwwwwwwwwwwwwwwwwww',
        font: "18px monospace"
    }]
});

Answer 1

Text is subject to hinting and kerning that happen differently at different point sizes and so does not normally scale uniformly. There is a hint available to indicate you would like this overridden:

    text-rendering="geometricPrecision"

Changing your code to

},{
    type: 'text',
    x: 0,
    y: 50,
    text: 'wwwwwwwwwwwwwwwwwww',
    'text-rendering': 'geometricPrecision',
    font: "17px monospace"
}]

Should make it work more like you want it too, although it will display less clearly at small point sizes.