SVG文字缩放不正确

问题描述

我使用Ext.daw.*绘制svg文本.根元素的大小为200x300.如果某个元素的大小大于根元素的大小，则除了文本:文本似乎具有更大的大小之外，所有元素都可以正确缩放.

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

推荐答案

文本容易受到提示和字距调整的影响，它们在不同的点大小下会发生不同的变化，因此通常不会均匀缩放.有提示可用表示您想要这样覆盖:

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"

将代码更改为

},{
    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.

这篇关于SVG文字缩放不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！