SVG文本缩放不正确

Question

我使用Ext.daw.*绘制svg文本。根元素的大小为200x300。如果某个元素的大小大于根元素的大小，那么除了文本之外，所有内容都可以正常缩放：文本的大小似乎更大。

看看这个演示。如何使文本正确缩放？

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-rendering="geometricPrecision"

将代码更改为

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

也应该让它更像你想要的那样工作，尽管它在小的点尺寸上会显示得不那么清晰。