SVG text scale weirdness

by molecule

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css">
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>
<div id="cnt1"></div>
<div id="cnt2"></div>

CSS

div {
    margin: 10px;
}
svg {
    background-color: #ddd;
}

JavaScript

Ext.create('Ext.draw.Component', {
    renderTo: 'cnt1',
    width: 200,
    height: 300,
    items: [{
        type: 'path',
        path: 'M0 0 V200',
        'stroke-width': 3,
        stroke: 'green'
    },{
        type: 'path',
        path: 'M200 0 V200',
        'stroke-width': 3,
        stroke: 'green'
    },{
        type: 'text',
        x: 0,
        y: 50,
        text: 'wwwwwwwwwwwwwwwwwww',
        font: "18px monospace"
    }]
});

// All settings the same but one line is much longer
Ext.create('Ext.draw.Component', {
    renderTo: 'cnt2',
    width: 200,
    height: 300,
    items: [{
        type: 'path',
        path: 'M0 0 V200',
        'stroke-width': 3,
        stroke: 'green'
    },{
        type: 'path',
        path: 'M200 0 V500',
        'stroke-width': 3,
        stroke: 'green'
    },{
        type: 'text',
        x: 0,
        y: 50,
        text: 'wwwwwwwwwwwwwwwwwww',
        font: "18px monospace"
    }]
});