如何让文字具有所需的高度和宽度？

问题描述：

我需要获得具有所需高度和宽度的文本。我试图找到在SVG的文件的东西，但发现只有font-size，也是我试图以这种方式使用规模：如何让文字具有所需的高度和宽度？

<text xmlns="http://www.w3.org/2000/svg" id="10996080909940" name="-1" 
x="1782.9351809218" y="-751.796133712862" width="1" height="1" style="font:Arial;text- 
anchor:start;stroke:#000000" transform="rotate(0) scale(2 2)"> SOME TEXT </text>

，但我得到的文本太大大小的地方不是我需要的和。

不太确定为什么在宽度/高度之后。作为使用字体大小的示例，http://jsfiddle.net/emCqs/不能像这样定位/大小。还是有一个特定的要求，你需要适应动态文本的形状，或其他？ – Ian

答

如果你的意思是你想让文本精确地填充任意的宽度和高度，那么在SVG中并不是一个简单的方法。您无法在<text>元素上指定宽度和高度。至少不在当前的SVG规范（1.1）中。

但是有几种方法可以通过一些技巧来达到这种效果。

一种方式是通过使用变换，因为你提示：

<svg> 

    <text font-size="10px" font-family="Verdana" transform="translate(99,400) scale(3.5,13.7)">SQUASHED TEXT</text> 
    <rect x="100" y="300" width="300" height="100" fill="none" stroke="red" /> 

</svg>

的第二种方式是通过使用一个内<svg>元件和设置视框匹配的文本的边界。然后您设置preserveAspectRatio="none"。

<svg> 

    <svg x="100" y="100" width="300" height="100" viewBox="0.2 -7.3 86 7.3" preserveAspectRatio="none" overflow="visible"> 
     <text font-size="10px" font-family="Verdana">SQUASHED TEXT</text> 
    </svg> 
    <rect x="100" y="100" width="300" height="100" fill="none" stroke="red" /> 

</svg>

这种方式是更详细的，但它有，一旦你找到正确的视框的一段文字的优势，可以使其很容易适应任何尺寸的矩形。只需将内部<svg>的x,y,width和height设置为矩形的大小即可。

此处演示：http://jsfiddle.net/ZRgEF/3/

如何让文字具有所需的高度和宽度？

相关推荐