SVG text scales inproperly

Question

Я использую Ext.daw. * Для рисования svg-текста. Корневой элемент имеет размер 200x300. Если какой-либо элемент имеет больший размер, чем размер корневого элемента, то все масштабируется должным образом, за исключением текста: текст, как представляется, имеет больший размер.

Отъезд this demo. Как правильно сделать текст?

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

Текст подлежит намекая и кернинг которые происходят по-разному в разных кеглей и поэтому обычно не масштабироваться равномерно. Существует hint available, чтобы указать, что вы хотели бы это ПЕРЕОПРЕДЕЛЕНЫ:

text-rendering="geometricPrecision" 

Изменение кода

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

Если сделать его работу более, как вы хотите его тоже, хотя он будет отображать менее четко в маленькой точке размеры.