SVG 文本缩放不正确答案

【问题标题】：SVG text scales inproperlySVG 文本缩放不正确
【发布时间】：2013-11-19 22:23:08
【问题描述】：

我使用 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"
    }]
});

【问题讨论】：

标签： svg extjs4

【解决方案1】：

文本会受到提示和字距调整的影响，这些提示和字距调整会在不同的点大小处发生不同的情况，因此通常不会统一缩放。有一个hint available 表示您希望覆盖它：

    text-rendering="geometricPrecision"

将代码更改为

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

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

【讨论】：

而且运行非常慢。